hidden div won't show onhover image

Question

Why is my hover function not working?

$("#staff").on("hover", function() {
  $("#staffdn").show();
});

#navbar {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: -20px;
  background-color: #ffd3d9;
}
#staffdn {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: 100px;
  top: 100px;
  background-color: #ffd3d9;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <ul>
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li>
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li>
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li>
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li>
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li>
  </ul>
</div>
<div id="staffdn">
  <ul>
    <li><img src="Staff-memebers.png"></li>
    <li><img src="commands.png"></li>
  </ul>
</div>

Did you look at hover in the jQuery docs https://api.jquery.com/hover/ — epascarello, Sep 24 '15 at 18:36
Also, selectors are case-sensitive ([on standards-compliant pages](http://stackoverflow.com/questions/2580029/jquery-class-selectors-like-someclass-are-case-sensitive#answer-2580031)). So, `$("#staff")` won't necessarily select ``. — showdev, Sep 24 '15 at 19:02

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-24T18:58:19.050

You should:

Not use visibility: hidden, instead use display: none at the load time.
Hide while loading the page.
Use hover as a function and not as an event.
Put all scripts inside $(document).ready() to run on DOM Loaded elements.
And change the CSS to: left: 80px; top: 60px;.

This should work:

$(function () {
  $("#staffdn").hide();
  $("#Staff").hover(function() {
    $("#staffdn").show();
  }, function () {
    $("#staffdn").hide();
  });
});

Snippet

$(function () {
  $("#staffdn").show();
  $("#Staff").hover(function() {
    $("#staffdn").show();
  }, function () {
    $("#staffdn").hide();
  });
});

#navbar {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: -20px;
  background-color: #ffd3d9;
}
#staffdn {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: 100px;
  top: 100px;
  background-color: #ffd3d9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navbar">
  <ul>
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li>
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li>
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li>
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li>
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li>
  </ul>
</div>
<div id="staffdn">
  <ul>
    <li><img src="Staff-memebers.png"></li>
    <li><img src="commands.png"></li>
  </ul>
</div>

It would be find to define `display:none` in the CSS. The issue is that jQuery's `show()` and `hide()` do not manipulate `visibility`. — showdev, Sep 24 '15 at 18:49
@showdev Had issues with `visibility`, that's the reason I have asked the OP not to use it. What's the best way then? — Praveen Kumar Purushothaman, Sep 24 '15 at 18:50
Your answer is fine. I just don't see the purpose of "at the load time", "Not define the hide styles in CSS", or "Hide while loading the page". Hiding the element with CSS works, too, as [shown here](http://jsfiddle.net/qeh6wy9k/). Also, I wanted to add some explanation of why `visibility` doesn't work here. — showdev, Sep 24 '15 at 18:56
@showdev I had problems when I had used `div {display: none;}` and then at first, if I do `$("div").toggle()`, it won't happen. Okay, now I get it. This explicitly shows `.show()`. Toggle won't happen. — Praveen Kumar Purushothaman, Sep 24 '15 at 18:58
@showdev I have updated my answer correctly. Can you check? You are awesome buddy. `:D` — Praveen Kumar Purushothaman, Sep 24 '15 at 18:58

hidden div won't show onhover image

1 Answers1