杰奎瑞 |单击时显示文本块.需要 div 高于 img，z 索引不起作用

Question

我有一条垂直的行星图像线。我正在尝试做的是，当单击由div 标签定义的行时，将出现一个文本块。我有一点工作。目前它会识别我正在点击div，但前提是我不在 img 标签的顶部。但是，我将 z 索引设置为低于div。

到目前为止，我拥有的：

.HTML

<article id="planets" class="article articleTwo">
    <div id="sun" class="off" onclick="planetClick()">
         <img src="images/sun.png" alt="The Sun"/>
    </div>
    <div id="mercury" class="off" onclick="planetClick()">
         <img src="images/mercury.png" alt="Mercury"/>
    </div>
    <div id="venus" class="off" onclick="planetClick()">
        <img src="images/venus.png" alt="Venus"/>
    </div>
    <div id="earth" class="off" onclick="planetClick()">
        <img src="images/earth.png" alt="Earth"/>
    </div>
    <div id="mars" class="off" onclick="planetClick()">
        <img src="images/mars.png" alt="Mars"/>
    </div>
    <div id="jupiter" class="off" onclick="planetClick()">
        <img src="images/jupiter.png" alt="Jupiter"/>
    </div>
    <div id="saturn" class="off" onclick="planetClick()">
        <img src="images/saturn.png" alt="Saturn"/>
    </div>
    <div id="uranus" class="off" onclick="planetClick()">
        <img src="images/uranus.png" alt="Uranus"/>
    </div>
    <div id="neptune" class="off" onclick="planetClick()">
        <img src="images/neptune.png" alt="Neptune"/>
    </div>
</article>

.CSS

article.articleTwo img {
    clear: right;
    float: right;
    border-left: 2px solid #000000;
    z-index: -2;
}
article.articleTwo div {
    overflow: auto;
}
.off {
    background-color: black;
    transition: background-color .4s ease;
}
.hover {
    background-color: transparent;
    transition: background-color .4s ease;
}

JavaScript

function planetClick() {
    if ($(event.target).not("img").hasClass("hover")) {
        $(event.target).not("img").removeClass("hover");
        $(event.target).not("img").addClass("off");
    }
    else {
     $(event.target).not("img").addClass("hover");
        $(event.target).not("img").removeClass("off");
    };
};

Answer 1

由于

代码难以测试，因此很难理解问题。但是 z 索引不起作用，因为 img 在div 内部，所以它们在不同的层上。我只能想象div可能比里面的图像小。您可以尝试将溢出自动更改为隐藏。

article.articleTwo div {
    overflow: hidden;
}

我也会稍微改变一下我的设置。由于您的元素只能是"悬停"或"关闭"，并且它们都以"关闭"开头，我认为您不需要它。

<article id="planets" class="article articleTwo">
    <div id="sun">
         <img src="images/sun.png" alt="The Sun"/>
    </div>
    <div id="mercury">
         <img src="images/mercury.png" alt="Mercury"/>
    </div>
    <div id="venus">
        <img src="images/venus.png" alt="Venus"/>
    </div>
    <div id="earth">
        <img src="images/earth.png" alt="Earth"/>
    </div>
    <div id="mars">
        <img src="images/mars.png" alt="Mars"/>
    </div>
    <div id="jupiter">
        <img src="images/jupiter.png" alt="Jupiter"/>
    </div>
    <div id="saturn">
        <img src="images/saturn.png" alt="Saturn"/>
    </div>
    <div id="uranus">
        <img src="images/uranus.png" alt="Uranus"/>
    </div>
    <div id="neptune">
        <img src="images/neptune.png" alt="Neptune"/>
    </div>
</article>

.CSS

article.articleTwo img {
    clear: right;
    float: right;
    border-left: 2px solid #000000;
    z-index: -2;
}
article.articleTwo div {
    overflow: hidden;
    background-color: black;
    transition: background-color .4s ease;
}
article.articleTwo div.hover {
    background-color: transparent;
}

.JS

$(".articleTwo > div").click(function(){$(this).toggleClass("hover");});

我认为这将做同样的事情，但看起来更容易一些。