div悬停不工作答案

【问题标题】：div hover not workingdiv悬停不工作
【发布时间】：2012-11-03 11:36:46
【问题描述】：

我正在制作导航栏，但使用 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 功能的另一件事是工作正常。提到的 jquery 代码是在 ajax 调用之后插入的。我检查了 IE8 和 chrome。

【问题讨论】：

还尝试使用类选择器或 id 选择器作为导航元素。所以你也可以在你的 HTML 中使用 div 来做其他事情。
我已更新代码以将 id 选择器用于 div，但代码仍然无法达到预期的效果。

标签： jquery html hover jquery-hover

【解决方案1】：

由于ul css 是display:none;，所以它没有显示任何东西并且悬停不起作用。请从ul 中删除display:none; css。

【讨论】：

我希望列表在页面加载时隐藏（在 css 中放置 display:none）和使用 'display': 'block' 的 div 悬停时，它应该显示列表并在 mouseout 时再次隐藏列表。
我已更新代码以将一些文本放入 div。我在这里发布代码时错过了这一点。
代码现在运行良好。我的 parseInt 也错了，所以没有选择正确的 id。感谢您的帮助。

【解决方案2】：

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

DEMO-1

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

DEMO-2

【讨论】：

在 div 的悬停上我将 css 添加到 ul 'display':'block'。无论如何，问题是 div hover 不起作用。这可能是什么原因？
我从附加的演示中得到了你的观点。但是为什么在 div 悬停时我无法使用“display”显示 Ul：“block”，因此列表在页面加载时隐藏（在 css 中放置 display:none）并且在 div 悬停时显示列表并在鼠标移出时再次隐藏列表。
我已经更新了代码以向 div 添加一些文本并使用 div id 选择器来实现悬停功能，正如上面 Tim 所建议的那样
代码现在运行良好。我的 parseInt 也错了，所以没有选择正确的 id。谢谢你的帮助。我现在将在我的原始代码中插入这个块，看看它是如何工作的。