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/

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

2 个答案: