Question

我正在寻找一种仅限CSS的解决方案，当鼠标悬停在DIV的任何部分（包括位于其前面的DIV）时淡化后DIV中的图像。

到目前为止，这是我能够构建的：http://jsfiddle.net/kqo10jLb/

CSS：

#caseouter {
    position: relative;
    top: 0px;
}

#casewrap2 {
    background-color: #000;
}

#casetitle {
    font-size: 30px;
    width: 100%;
    display: block;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0px 0px 0px;
    color: #fff;
    margin-bottom: 0px;
}

#casethumb {
    width: 100%;
    display: block;
    margin-bottom: -100px;
    opacity: 1;
    transition: .2s opacity ease .2s;
    height: 100px;
}

#casesecondline {
    font-size: 30px;
    color: #666;
    text-transform: uppercase;
    margin: 0 auto;
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    margin-top: -10px;
    padding: 0px;
}

#casethumb img {
    width: 100%;
}


#casethumb:hover {
    opacity: .75;
}

#casetitle:hover ~ #casethumb a {
    opacity: .75;
}

#casesecond:hover ~ #casethumb a {
    opacity: .75;
}

HTML：

<div id="casewrap2">
    <div id="casethumb">
        <a href="www.google.com">
            <img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
        </a>
    </div>
</div>
<div id="caseouter">
    <a href="www.google.com">
        <div id="casetitle">Headline</div>
        <div id="casesecondline">Subheadline</div>
    </a>
</div>

正如您将看到的，背面图像在悬停时淡化，但是当我将鼠标悬停在标题和子标题文本上时，它不会消失。我尝试过使用#casetitle:hover ~ #casethumb a，但我显然做错了什么。谢谢！

Answer 1

这是你之后的事吗？ http://jsfiddle.net/kqo10jLb/1/

我将caseouter移动到casewrap2对象中并将悬停更改为：

#casewrap2:hover #casethumb {
    opacity: .75;
}

即使悬停在前面的DIV上，也可以在悬停时淡化DIV

1 个答案: