如何使元素在使用jQuery悬停另一个元素时具有“悬停”效果（CSS）？

当我将鼠标悬停在H2的链接，它变绿：如何使元素在使用jQuery悬停另一个元素时具有“悬停”效果（CSS）？

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是要走的路。有什么建议么？

来源

2011-08-04 alexchenco

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为+选择兼容性

来源

2011-08-04 16:19:18 kojiro

你能给我举一个如何做到这一点与jQuery的例子吗？ – alexchenco

你可以这样做：

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/

来源

2011-08-04 16:24:48

如何使元素在使用jQuery悬停另一个元素时具有“悬停”效果（CSS）？

回答

相关问题