CSS特殊懸停

Question

http://jsfiddle.net/98bzqoq1/

有什麼辦法，使對類=「C」懸停效果，所以它影響的類=「d」，背景色

//我至今

代碼

<div> 
    <ul> 
     <li class="c">Caroline</li> 
     <li class="c">Emilia</li> 
    </ul> 
</div> 
<div class="d">This text should be in a green box...</div> 

//不起作用

.c:hover ~ .d { 
    background: lightgreen; 
} 

Answer 1

使用僞類作爲行動修改其他元素只能在其他元素是具有僞類的元素（如:hover或:focus）的直接或間接兄弟或子元素時才能完成。原因是因爲CSS child/sibling selectors是相當嚴格的。

可以使用>選擇器選擇直接孩子，+選擇器選擇相鄰的兄弟姐妹，以及~選擇器選擇一般的後續兄弟。例如，如果您有以下HTML：

<div> 
    <div class="c">Hover Me!</div> 
    <div> 
     This is a direct adjacent sibling to the element with class "c". 
    </div> 
</div> 
<div class="d"> 
    This is an arbitrary element. It is neither a child nor sibling of 
    an element with class "c". It cannot be selected as a result of a 
    pseudo-class action on the textfield using CSS, but can be selected 
    using client-side scripting such as JavaScript or jQuery. 
</div> 

您可以在相鄰的兄弟風格div class="c"與CSS，但樣式的任意段落的div class="c"結果沒有可能的方式正在徘徊（因爲它是既不是孩子也不是兄弟姐妹，而是父母的兄弟姐妹）而不使用客戶端腳本（JavaScript，jQuery等）。

使用jQuery .hover()函數，您可以實現您的最終目標。例如，下面的代碼將樣式任意段落，並可以改變選擇頁面上的任何元素（簡單元素的CSS選擇器作爲參數傳遞給$()功能）：

$(".c").hover(function() { 
    $(".d").css("background-color","green"); 
}, function() { 
    $(".d").css("background-color","transparent"); 
}); 

Here is an example這表明這兩個CSS和jQuery方法。

Answer 2

從你提供的代碼，你可以做到這一點，因爲唯一的內容在你的DIV是你的清單

div:hover ~ .d { 
    background: lightgreen; 
} 

http://jsfiddle.net/98bzqoq1/1/

但是，如果你的代碼是比較複雜的，那麼這是不可能的使用CSS只