如何在鼠標懸停時突出顯示div中的鏈接

Question

我在div中分散了一些鏈接。 我想強調div onmouseover中的所有鏈接。 是否有可以在FF，IE和chrome中使用的jquery解決方案。

謝謝。

Answer 1

沒有JavaScript怎么辦？

樣式

.linkdiv a {
   color: blue;
}

.linkdiv:hover a {
   color: red;
}

我想測試一下，但是遺憾的是jsfiddle與iPhone不兼容:(

Answer 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部分以突出顯示您喜歡的樣式。

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() 。