0

Considering I have a basic nav like list: 

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

And some jquery...

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

Why would the menu temporarily show while the page is loading but when the loading has completed, it's properly hidden. How can I fix that?

Quesofat
  • 1,493
  • 2
  • 21
  • 49
  • i think you need to use the style into css fi;e – Jayanta Mar 29 '17 at 18:38
  • 2
    I can not replicate this behaviour. Something else must be going on. Can you post a code snippet / JSFiddle that shows the issue? – Bram Vanroy Mar 29 '17 at 18:42
  • _"Why would the menu temporarily show"_ - are you trying to hide only that specific item, or the whole menu? – CBroe Mar 29 '17 at 18:43
  • 2
    Is this a proper example? I feel like something is missing. In **[this JSFiddle](https://jsfiddle.net/qh7gwecc/)** the first `li` is hidden from the get go. Not temporarily displayed and then hidden. Also, how would `mouseenter` and/or `mouseleave` be detected on an already hidden element? There must be more or something needs adjusting. – hungerstar Mar 29 '17 at 18:47
  • 2
    Despite it not being the focus (seemingly) of your question, you can't have a `mouseenter` on a `display: none;` element. The element occupies no space in the DOM, therefore there isn't a bounding box to trigger the mouse event. Try using `visibility: hidden;` / `visibility: visible` **or** `opacity: 0` / `opacity: 1` – Tyler Roper Mar 29 '17 at 18:50
  • This answer talks about issues with trying to do the same thing; http://stackoverflow.com/a/21225310/6483483 – blackandorangecat Mar 29 '17 at 19:11
  • A bigger issue here is that once it is set to display: none; you would never be able to get the mouseenter event to trigger. – Joe Lissner Mar 29 '17 at 19:16

1 Answers1

2

I would suggest this

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

css

If you wonder why i did not apply the styles to the id directly. Its because you might want to target it with jquery for something else but it would also work by using #unhide instead of .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>

You could also use the css attributes on the element directly like this 

<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>

and 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');
    });
    });

I think that should work, and i also think that the problems comes from the fact that display none actually prevents mouse hover event listeners

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

NotanNimda
  • 407
  • 1
  • 3
  • 11