jQuery | 单击时显示一段文本。 需要div高于img，z-index不起作用

Question

我有行星图像的垂直线。 我想做的是单击由div标记定义的行时，将出现一个文本块。 我有一些工作。 目前，它会识别出我在div中单击，但前提是我不在img标签的顶部。 但是，我将z-index设置为低于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-index无效，因为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");});

我认为这样做也一样，但看起来更简单。