CSS特殊懸停

有什麼辦法，使對類=「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; 
}

來源

2014-11-20 richie_south

「*不起作用'.b：hover〜.d' *」 - 好吧，爲什麼呢？您的HTML中沒有'.b'元素。 – 2014-11-20 21:07:36

哦哈哈我更新了一些我的代碼之前我張貼，我有點錯過了。想象class =「b」= class =「c」 – 2014-11-20 21:13:08

@ user2538535你可以編輯問題來糾正錯字 – Huangism 2014-11-20 21:13:35

使用僞類作爲行動修改其他元素只能在其他元素是具有僞類的元素（如: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方法。

來源

2014-11-20 21:16:00

非常感謝！ :)，我想我必須去JavaScript的方式。 – 2014-11-20 21:20:15

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

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

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

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

來源

2014-11-20 21:06:06 Huangism

另外OP可以用'+'選擇器實現相同的結果。 – 2014-11-20 21:23:09

這可以用於基本的使用，但正如你所說的「如果你的代碼更復雜，那麼這僅僅使用CSS是不可能的」 - 黃色主義，可悲的是我的原始代碼是（未顯示）。 – 2014-11-20 21:25:20

事實上，他可以，無論哪種方式，我會想像CSS會在這種情況下不起作用，因爲代碼更復雜。使用jquery這將是一個非常簡單的修復，但OP沒有用js或jquery標記問題 – Huangism 2014-11-20 21:26:28

CSS特殊懸停

回答

相關問題