javascript - 页面呈现时显示无失败

Question

考虑到我有一个像列表这样的基本导航:

<nav>
  <ul>
    <li id="unhide" style="display:none;"></li>
    <li></li>
    <li></li>
  </ul>
</nav>

还有一些 jquery...

jQuery(document).ready(function($) {
  $("#unhide").on('mouseenter', function() {
    $(this).css('display', 'block');
  }).on('mouseleave', function() {
    $(this).css('display', 'none');
  })
})

为什么菜单在页面加载时会暂时显示，但加载完成后，它会被正确隐藏。我该如何解决？

Answer 1

我会推荐这个

    jQuery(document).ready(function($) {
$("#unhide").mouseover(function() {
$(this).attr("class", '');
}).mouseout(function() {
$(this).attr("class", 'hide');
});
});

CSS

如果您想知道为什么我不直接将样式应用到 id。这是因为您可能想用 jquery 将其作为其他目标，但它也可以通过使用 #unhide 而不是 .hide 来工作

.hide {
   /* you can use the height 0.1 if you dont want
   it in layout else you can just erase the height proprety */
   height:0.1px;

   /* 0 opacity works */
   opacity:0;
}

html

<nav>
  <ul>
    <li id="unhide" class='hide'>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>

你也可以像这样直接在元素上使用css属性

<nav>
      <ul>
        <li id="unhide" style="height:0.1px;
         opacity:0;">One</li>
        <li>As said before the height is not useful</li>
        <li>Three</li>
      </ul>
    </nav>

和jquery

jQuery(document).ready(function($) {
    $("#unhide").mouseover(function() {
    $(this).css("opacity", '1');
    // if height
    $(this).css("height", '');
    }).mouseout(function() {
    $(this).css("opacity", '0');
    //if height
    $(this).css("height", '0.1px');
    });
    });

我认为这应该可行，而且我还认为问题来自于 display none 实际上阻止了鼠标悬停事件监听器这一事实

https://jsfiddle.net/qh7gwecc/2/