用js改变z-index [重复]

问题描述 投票：2回答：1

这个问题在这里已有答案：

用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 + 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>
javascript html css
1个回答
5
投票

z-index仅适用于定位元素。你正在使用float，这不是一回事。

z-index的重点是能够分层元素。但是，当所有元素都在普通文档“flow”中时，分层（超出一个项目由于溢出而与另一个项目重叠）不会发生。为了能够实现真正的分层，您必须将需要分层的项目从正常文档流中分离出来，并通过将CSS position指定为relative，absolute或fixed来完成。

来自MDN：

z-index CSS属性设置定位元素及其后代或弹性项的z顺序。具有较大z-index的重叠元素覆盖具有较小z-index的元素。

将position:relative添加到.card类。

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)";
        }
    }
}
image { width:200px; } 
.card
{
    background: rgb(70, 70, 70);
    width: 200px;
    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;
    position:relative; /* z-index only works on positioned elements */
}
.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 
                </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 
                </div>
            </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.