【发布时间】：2018-11-21 17:03:08
【问题描述】：
我对 js 的 z-index 更改有疑问：
我有一堆卡片
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
我用js改变了一些属性：
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}
如果您将鼠标悬停在第一张卡片上一切正常，它会越过第二张卡片，但一旦我将鼠标悬停在第二张卡片上并尝试再次将鼠标悬停在第一张卡片上，它就会中断：Gif for a better understanding of my problem
我不是 js 方面的专家，所以如果有什么严重错误的地方指出来，但不要刻薄。
我已经在默认 CSS 中尝试了 !important 标记，但是当我检查第二张卡片保留 z-index: -1 并且第一张卡片具有 z-index: 9 的元素时它没有做任何事情，但它仍然绘制它在它下面。
在将card[i] 设置为9 之前，我还尝试将card[i + 1] 设置为-1，但它不起作用。
我偶然发现了 setAttribute() 的样式，但它看起来覆盖了所有其他 CSS，并且在我的情况下会导致一长串文本（“如果我把所有的 CSS如果它有效，因为它看起来像一个丑陋的解决方案")
我没有想法... P.S.不允许使用 jQuery 或其他外部库。
编辑代码sn-p：
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>【问题讨论】：
-
提前设置 CSS 类然后使用
element.classList.add()、element.classList.remove()和element.classList.toggle()添加/删除/切换它们要简单得多。 -
另外，您的 GIF 并不能真正说明问题。似乎将鼠标悬停在一张卡片上会缩放该卡片，然后将另一张悬停在另一张卡片上对那张卡片也是如此。然后回到第一张卡片似乎又可以工作了。
-
CSS Overrides
!important将覆盖元素上设置的所有内联样式。 -
@ScottMarcus 我不是。它在他的
.card课程中。它是导致问题的原因。 -
另外，你的前两个循环只是覆盖了在 CSS 类中设置的卡片的初始样式。这似乎是一种浪费。只需将类设置为您想要的初始状态。
标签： javascript html css