CSS兩部分影響其他孩子

Question

我在我的網站上有.logo div，其中包含.icon和.text。它還包含.links，它位於.text之下，但不是實際徽標圖像的一部分。 .icon和.text都有兒童.image和.image-hover，我用它來製作背景圖像淡化效果（用於徽標）。

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，反之亦然？

http://jsfiddle.net/7kj7G/

編輯 我已經嘗試JSW189的建議。 .links在.text之下，.icon與兩者的高度相同。如果我嘗試將它們包裝起來，該框只有.text的大小，並且不包含完整的.icon。

編輯 JSW189的建議似乎只是z-index的.icon使箱子變小。

Answer 1

你可以包裝.icon和。 text在另一個div中，並使用該div的:hover僞類。這樣，當用戶懸停在.icon或.text上時，所有:hover樣式都會顯示。

HTML：

<div class="logo"> 
    <div class="wrap-icon-and-text"> 
     <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> 
    <div class="links">Links</div> 
</div> 

CSS：

.wrap-icon-and-text:hover { 
    /* styles here */ 
} 

Answer 2

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

選擇影響.icon .image和.text .image懸停

.logo:hover .icon .image 
{ 
    opacity: 0; 
} 

.logo:hover .text .image 
{ 
    opacity: 0; 
}