CODEWITHSUNDEEP
jquery
Hai Truong IT
Hai Truong IT

Reputation: 4187

How to fix jquery hover show description

<script>
$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .parent("li")
      .find("p")
      .css({
         position:"absolute"
      })
      .removeClass("hidden")
      .stop()
      .animate({opacity: 1}, "fast");
   }, function() {
      $(this)
      .parent()
      .find("p")
      .stop()
      .animate({opacity: 0}, "fast");
});
</script>

and html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="nav">
   <li>
      <table>
         <tr>
            <td><h3>name</h3></td>
         </tr>
      </table>
      <p class="hidden">description</p>
    </li>
</ul>

... and css style:

.hidden {
display: none;
}

when i hover name is result not show tooltip of

tag, how to fix ?

Upvotes: 0

Views: 359

Answers (2)

jfriend00
jfriend00

Reputation: 707456

I found the following errors in your code:

  1. A syntax error. You were missing a closing })
  2. .parent("li") needs to be changed to .closest("li") in two places because .parent() only looks up one level
  3. The position: absolute is not needed if you want it to display in place where it is in the HTML
  4. You can just use .fadeIn() and .fadeOut() instead of removeClass() and .animate().
  5. When you call .stop(), you want to also clear it from the queue with .stop(true).

This code will work:

$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeIn("fast");
   }, function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeOut("fast");
   });
});

Working demo here: http://jsfiddle.net/jfriend00/3A4fv/

I realized this can be done much shorter like this:

$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeToggle("fast");
   });
});

Working demo of this one here: http://jsfiddle.net/jfriend00/QCEy6/

Upvotes: 1

Hai Truong IT
Hai Truong IT

Reputation: 4187

I think you remove table tr td, code will working

<ul id="nav">
   <li>
      <h3>name</h3>
      <p class="hidden">description</p>
    </li>
</ul>

Upvotes: 0

Related Questions