在JavaScript中更改最后一個懸停

Question

我將導航欄放在一起，找到了一個不錯的腳本，可讓li在顯示第二級菜單時保持其“懸停”狀態。 在我的上一個李中，我有一個搜索欄，並希望將鼠標懸停。 碼：

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>    

Answer 1

沒有檢驗我的建議。 嘗試這個：

$("ul#topnav li:last-child").hover(nil);

按照您現有的代碼。 您的代碼將hover元素添加到#topnav中的所有li元素中，因此在此之后找到最后一個元素並將其移除。

注意：這不是最佳解決方案，因為當您在搜索下方添加一些新的li元素時，您將得到錯誤的結果。 最好為search li元素提供自己的唯一標識符，並刪除此元素上的懸停：

$("ul#topnav li#search").hover(nil);

編輯：

甚至更好-從一開始就使用不等於選擇器的屬性。

代替：

$("ul#topnav li").hover(function() {
  // ...

給你的搜索li的id “搜索”，並做到這一點：

$('ul#topnav li[id!="search"]').hover(function() {
  // ...

http://api.jquery.com/attribute-not-equal-selector/

Answer 2

您可以從選擇器中排除元素 。 去做。

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").not('li:last').hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>