<分区>
我对 z-index 有疑问用js改变:
我有一堆卡片
.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 方面的专家，所以如果有什么可怕的错误，请指出来，但不要刻薄。
我试过 !important默认 CSS 中的标记，但当我检查第二张卡片保留 z-index: -1 的元素时它没有做任何事情而第一张卡有 z-index: 9但它仍然把它画在它下面。
我还尝试设置 card[i + 1]至 -1在设置 card[i] 之前至 9但它没有用。
我偶然发现了 setAttribute()对于样式，但看起来它覆盖了所有其他 CSS，并且在我的情况下会导致一长串文本(“没有测试我是否将所有 CSS 放入其中是否有效，因为它看起来像一个丑陋的解决方案")
我没有想法...... P.S.不允许使用 jQuery 或其他外部库。
编辑代码片段:
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>