div懸停不起作用

我正在製作導航欄，但使用JQuery的div懸停無法正常工作。我不確定我哪裏錯了; HTML代碼：div懸停不起作用

<div id="Navigation_left_0"><a href="">click This</a> 
    <ul id="navScroll_0" sizset="true"> 
     <li><a href="">abcd</a></li> 
     <li><a href="">abxfdcd</a></li> 
     <li><a href="">afgvbcd</a></li> 
     <li><a href="">asfrbcd</a></li> 
    </ul> 
</div> 
<div id="Navigation_left_1" ><a href="">click This</a> 
    <ul id="navScroll_1" sizset="true"> 
     <li><a href="">abcd</a></li> 
     <li><a href="">abxfdcd</a></li> 
     <li><a href="">afgvbcd</a></li> 
     <li><a href="">asfrbcd</a></li> 
    </ul> 
</div>

jQuery代碼：

$(document).ready(function() { 
    $('div[id^="Navigation_left"]').hover(

    function() { 
     alert("Hello"); 
     var id = $(this).attr('id'); 
     var idStr = id.split('_'); 
     $(this).css('background-color', 'grey'); 
     var idNum = parseInt(idStr[2]); 
     var ulID = "#navScroll_" + idNum; 
     $(ulID).css({ 
      'display': 'block', 
      'height': '3em', 
      'float': 'left', 
      'padding-right': '2px' 
     }); 
    }, function() { 
     var id = $(this).attr('id'); 
     var idStr = id.split('_'); 
     var idNum = parseInt(idStr[2]); 
     $("#navScroll_" + idNum).css('display', 'none'); 
     $(this).css('background-color', 'red'); 
    }); 
});

CSS部分：

ul{ 
    list-style-type:none; 
    height:50px; 
    display:none; 
} 
ul li { 
    height: 3em; 
    float:left; 
    padding-right:2px; 
    list-style-type:none; 
    width:33%; 
    } 
div { 
    background-color:red; 
    float:left; 
    width:"20%"; 
    height:"5%"; 
    padding-left:10px; 
    padding-right:10px; 
    position:relative; 
}

有多個div，但我只放了一段代碼，它可以理解幫助碼。該控制不進入div懸停，因爲即使警報不會up.one更多的事情，我正在使用document.ready中的ajax功能工作正常。提到的jQuery代碼在ajax調用後插入。我檢查了IE8和Chrome。

來源

2012-11-03 mrityunjay

也嘗試使用導航元素的類選擇器或ID選擇器。所以你可以在你的HTML中使用div來做其他事情。 –

我已經更新了代碼使用id選擇器的div，但代碼仍然不能用於預期的結果。 – mrityunjay

你隱藏ul列表，以便從UL CSS刪除display:none;，然後嘗試

DEMO-1

，因爲你是隱藏UL所以下DIV沒有內容可懸停在如此嘗試添加min-height:10px;到的div

DEMO-2

來源

2012-11-03 11:41:49

懸停div我添加CSS到ul'顯示'：'塊'。無論如何，問題是div懸停不起作用。這可能是什麼原因？ – mrityunjay

@ mrityunjay，檢查http://jsfiddle.net/pintu31/Td566/4/ –

@ mrityunjay，你的更新代碼工作正常，對不對？ –

由於ul css是display:none;所以它沒有顯示任何東西，懸停不起作用。請從ul刪除display:none; css。

來源

2012-11-03 11:48:37

我想要列表隱藏在頁面加載（將顯示：沒有在CSS）和div懸停使用'顯示'：'塊'，它應該顯示列表，並在鼠標懸停再次隱藏列表。 – mrityunjay

我已經更新了將部分文字放在div中的代碼。我在這裏發佈代碼時錯過了這個。 – mrityunjay

現在代碼工作正常。我也有parseInt錯誤，所以正確的ID沒有被選中。謝謝你的幫助。 – mrityunjay

div懸停不起作用

回答

相關問題