1

我有 div，内容中有一些链接。我想突出显示 div onmouseover 中的所有链接。是否有适用于 FF、IE 和 chrome 的 jquery 解决方案。

谢谢。

4

6 回答 6

4

没有 JavaScript 怎么样？

样式.CSS

.linkdiv a {
   color: blue;
}

.linkdiv:hover a {
   color: red;
}

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

于 2010-09-24T17:30:58.313 回答
2

演示

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 部分以突出显示您喜欢的样式。

于 2010-09-24T17:38:46.367 回答
1

就我而言，最好的解决方案=）

标记：

<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;}
于 2010-09-24T17:31:58.727 回答
0

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

$('#MyDiv').live('mouseenter', function(){
    $(this).find('a').addClass('highlight');
});
$('#MyDiv').live('mouseleave', function(){
    $(this).find('a').removeClass('highlight');
});
于 2010-09-24T16:56:01.637 回答
0

为所有链接提供相同的类，然后执行以下操作：

$(document).ready(function() {
  $('.someClass').hover(function() {
    $('.someClass').css('underline' : 'solid 1px #FFF');
  });
})
于 2010-09-24T16:56:03.333 回答
0

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

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

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

于 2010-09-24T16:57:04.630 回答