Question

我在内容中分布了几个链接。我想强调div onmouseover中的所有链接。是否有适用于FF，IE和Chrome的jquery解决方案。

感谢。

Answer 1

没有JavaScript怎么样？

的style.css

.linkdiv a {
   color: blue;
}

.linkdiv:hover a {
   color: red;
}

我想测试一下，但遗憾的是jsfiddle不兼容iPhone :(

Answer 2

Demo

<强> HTML：

<div id='links'>
    This is simple text<br />
    <a href='#'>Link1<a/><br />
    <a href='#'>Link2<a/><br />
    <a href='#'>Link3<a/><br />
</div>

<强> jQuery的：

$('#links').live('mouseover', function(){
    $('#links > a').addClass('highlight');
});

$('#links').live('mouseout', function(){
    $('#links > a').removeClass('highlight');
});

<强> CSS：

.highlight {
 background-color : red;   
}

您可以编辑CSS部分以您喜欢的样式突出显示。

Answer 3

最佳解决方案，就我的担忧而言=）

加价：

<h1>CSS is cool! </h1>
<ul id="css">
    <li><a class="links" href="#"> Link1 </a></li>  
    <li><a class="links" href="#"> Link2 </a></li>  
    <li><a class="links" href="#"> Link3 </a></li>  
    <li><a class="links" href="#"> Link4 </a></li>
</ul>

CSS ：

 #css li { margin:0px 5px;list-style:none; float:left;}
 #css .links { color :#0099f9; text-decoration:none;font:bold 20px Arial;}
 #css:hover a.links { color : #f0f;}

Answer 4

这样的事情（在你的文件中准备好了）应该这样做！

$('#MyDiv').live('mouseenter', function(){
    $(this).find('a').addClass('highlight');
});
$('#MyDiv').live('mouseleave', function(){
    $(this).find('a').removeClass('highlight');
});

Answer 5

将所有链接指定为同一个类，然后执行以下操作：

$(document).ready(function() {
  $('.someClass').hover(function() {
    $('.someClass').css('underline' : 'solid 1px #FFF');
  });
})

Answer 6

如果我没记错的话，你应该能够做到：

$('div selector').hover(function(e) {
    $(this).find('a').doThings();
},
function(e) {
    $(this).find('a').undoThings();
});

我还建议切换显式$.hover()调用（仅作为示例提供）以使用$.delegate()或$.live()。

如何在鼠标悬停时突出显示div中的链接

6 个答案: