Question

我正在制作一个导航栏但使用JQuery的div悬停不起作用。我不知道我哪里出错了; HTML代码：

<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悬停。还有一件事我在document.ready中使用ajax功能正常工作。在ajax调用之后插入提到的jquery代码。我检查了IE8和chrome。

Answer 1

隐藏ul列表，然后从ul css中删除display:none;，然后尝试

<强> DEMO-1

因为你隐藏了ul所以没有div下的内容可以悬停在上面所以尝试将min-height:10px;添加到div

<强> DEMO-2

Answer 2

由于ul css为display:none;所以它没有显示任何内容而且悬停不起作用。请从display:none;删除ul css。

div悬停不起作用

2 个答案: