悬停时淡出 DIV - 即使悬停在前 DIV 上

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;
}