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/

页面呈现时显示无失败

1 个答案: