我在我的網站上有.logo
div,其中包含.icon
和.text
。它還包含.links
,它位於.text
之下,但不是實際徽標圖像的一部分。 .icon
和.text
都有兒童.image
和.image-hover
,我用它來製作背景圖像淡化效果(用於徽標)。CSS兩部分影響其他孩子
HTML:
<div class="logo">
<div class="icon"><span class="image"></span><span class="image-hover"></span></div>
<div class="text"><span class="image"></span><span class="image-hover"></span></div>
<div class="links">Links</div>
</div>
CSS:
.icon:hover .image {
opacity: 0;
}
// opposite for .image-hover
.text:hover .image {
opacity: 0;
}
// opposite for .image-hover
的問題是,圖標和文本都是獨立的,使它看起來相當醜陋。我不想.links
影響(所以.logo:hover
不能使用)。是否有可能使.icon:hover
影響.text .image
,反之亦然?
編輯 我已經嘗試JSW189的建議。 .links
在.text
之下,.icon
與兩者的高度相同。如果我嘗試將它們包裝起來,該框只有.text
的大小,並且不包含完整的.icon
。
編輯 JSW189的建議似乎只是z-index的.icon使箱子變小。
的問題創建的jsfiddle。 – ATOzTOA 2013-02-17 17:06:10
當你懸停而不是'.text'時,你想模擬'.icon:hover'?你不能用純css – 2013-02-17 17:09:16
@wes我不想模擬'.icon:hover'但我想影響'.icon .image'和'.text .image' – nebkat 2013-02-17 17:11:38