Question

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

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

...和css风格：

.hidden {
display: none;
}

当我悬停名称结果未显示

标签的工具提示时，如何修复？

Answer 1

我在您的代码中发现了以下错误：

语法错误。您错过了结束})
.parent("li")需要在两个位置更改为.closest("li")，因为.parent()只查找一个级别
如果您希望它显示在HTML中的位置，则不需要position: absolute
您可以使用.fadeIn()和.fadeOut()代替removeClass()和.animate()。
当您致电.stop()时，您还要使用.stop(true)从队列中清除它。

此代码可以使用：

$(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");
   });
});

此处的演示演示：http://jsfiddle.net/jfriend00/3A4fv/

我意识到这可以做得更短：

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

这里的工作演示：http://jsfiddle.net/jfriend00/QCEy6/

Answer 2

我认为您删除了表tr td，代码将正常工作

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

如何修复jquery悬停显示说明

2 个答案: