如何使元素在使用jQuery懸停另一個元素時具有「懸停」效果（CSS）？

Question

當我將鼠標懸停在H2的鏈接，它變綠：

HTML：

<div class="project"> 
<a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6"> 
<img class="attachment-post-thumbnail wp-post-image" width="278" height="128" title="taiwantalk_thumb" alt="taiwantalk_thumb" src="http://localhost/asylum/wp-content/uploads/2011/07/taiwantalk_thumb.png"> 
</a> 
<h2> 
<a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6">Taiwantalk</a> 
</h2> 
<p>Design, HTML, CSS, Wordpress</p> 
</div> 

CSS：

#showcase h2 a:hover { 
    color: #682 !important; 
} 

我想，當我將鼠標懸停在圖片鏈接太H2變綠。

我認爲jQuery是要走的路。有什麼建議麼？

Answer 1

a:hover+h2 

將在CSS [1]中工作。直接使用它作爲jQuery選擇器可以工作，但應用樣式可能會很麻煩。以下是我會做，如果我需要支持CSS +選擇：

... 
<style type="text/css"> 
#showcase h2 a:hover, 
#showcase a:hover+h2, 
#showcase.colorme h2 { color: #682; } 
</style> 

<script type="text/javascript> 
// onload or whatever makes sense: 
$("#showcase>a").hover(
    function(){ $(this).parent().toggleClass("colorme"); }, 
) 
</script> 
... 

---

[1]見http://www.quirksmode.org/css/contents.html爲+選擇兼容性

Answer 2

你可以這樣做：

var colorSaved; 
$('img').hover(function(){ 
    var link = $(this).closest('div.project').find('h2 a'); 
    colorSaved = link.css('color'); 
    link.css('color', 'green'); 
}, 
function(){ 
    var link = $(this).closest('div.project').find('h2 a'); 
    link.css('color', colorSaved); 
}); 

這將鏈接的顏色保存在h2中，在懸停時將顏色切換爲綠色，然後將顏色恢復爲已保存的顏色

我做了這個小提琴爲例http://jsfiddle.net/nicolapeluchetti/gHjdy/），它與文本「懸停測試」，而不是圖像）

當然一個div，如果你有很多與類項目的div這個代碼適用於相對H2。看看這裏http://jsfiddle.net/nicolapeluchetti/gHjdy/1/