css - 无法访问 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