如何突出鼠標懸停的div中的鏈接

我有div與內容中分散的幾個鏈接。我想強調div onmouseover中的所有鏈接。有沒有工作在FF，IE和鉻的jquery解決方案。如何突出鼠標懸停的div中的鏈接

謝謝。

2010-09-24 Nick

無JavaScript的怎麼樣？

的style.css

.linkdiv a { 
    color: blue; 
} 

.linkdiv:hover a { 
    color: red; 
}

我想測試這一點，但可惜的jsfiddle不兼容iPhone :(

來源

2010-09-24 17:30:58 mkoistinen

+1爲通過iPhone回答的奉獻精神。這完全是一種挫敗感和耐心的考驗（**爲什麼**在標準鍵盤上沒有反勾號）？ – 2010-09-24 18:35:09

您可以在iPhone上「反勾號」，只需按住單引號標記即可。它會出現在彈出窗口中！ =） – mkoistinen 2010-09-24 18:46:35

@mkoistinen，那麼它可能是一個國際鍵盤問題。拿着撇號/單引號給出了一個明智的左引號，明智的右引號和一個普通的單引號。我正在使用英語（英國），你正在使用哪一種？ – 2010-09-24 19:11:49

這樣的事情（在你的文檔準備好）應該這樣做！

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

來源

2010-09-24 16:56:01 Patricia

給所有的鏈接相同的類，然後做到這一點：

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

來源

2010-09-24 16:56:03 Catfish

如果我沒記錯的話，你應該能夠只是做：

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

我還建議切換明確的$.hover()呼叫（僅作爲示例提供）以使用$.delegate()或$.live()。

來源

2010-09-24 16:57:04 mway

最佳的解決方案，至於我的關心=）

標記：

<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-24 17:31:58

我可能是錯的，但我認爲OP希望所有的鏈接高亮當用戶懸停在整個父div。 – mkoistinen 2010-09-24 17:35:11

ohh是的先生，好像我沒有正確地閱讀這個問題，更新！ – 2010-09-24 17:37:29

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一部分，在自己喜歡的款式凸顯。

來源

2010-09-24 17:38:46 NAVEED

如何突出鼠標懸停的div中的鏈接

回答

相關問題