无法访问div中的div

Question

当用户将鼠标悬停在<div>上时，我希望<div id="redBox">内有display: inline-block个img。像这样：

img.icnLocation:hover ~ .div_icnStamp.icnLocation {
    display: inline-block; 
}

出于某种原因，当这个div在<div id="redBox">内时无法访问。

请参阅the fiddle了解我的意思。我需要纯粹通过CSS来做这件事，不幸的是没有jQuery。非常感谢任何帮助，非常感谢你！

Answer 1

~是general sibling selector，第二个div不是兄弟，但它所在的#redBox div。

您可以使用img.icnLocation:hover ~ #redBox .div_icnStamp.icnLocation：

img.icnLocation:hover ~ .div_icnStamp.icnLocation, img.icnLocation:hover ~ #redBox .div_icnStamp.icnLocation {
    display: inline-block;
    background-color:yellow;
    font-weight:bold;
}

<强> jsFiddle example