Question

我正在尝试使用多个链接制作表格，以便在鼠标移过和图像时显示jQuery。这可以工作，但是当我将鼠标从图像上移开时，表会隐藏。当鼠标悬停在桌子上时，我需要将桌子显示出来。我是编程新手，我希望你能帮助我。

这是HTML表：

<table class="menu">
                      <tr>
                        <td valign="top" width="130">
                            <a href="#">Link 1</a><br />
                            <a href="#">Link 2</a><br />
                            <a href="#">Link 3</a><br />
                        </td>
                        <td valign="top" width="130">
                            <a href="#">Link 4</a><br />
                            <a href="#">Link 5</a><br />
                            <a href="#">Link 6</a><br />
                        </td>
                        <td valign="top" width="130">
                            <a href="#">Link 7</a><br />
                            <a href="#">Link 8</a><br />
                            <a href="#">Link 9</a><br />
                        </td>
                      </tr>
                    </table>

这是jQuery：

    $(document).ready(function(){
      $('.picture').mouseover(function(){
        $('.menu').fadeIn('fast');
      });
    });

    $(document).ready(function(){
      $('.picture').mouseleave(function(){
          $('.menu').fadeOut('fast');
      });
    });

非常感谢你！

Answer 1

据我所知，如果你删除了一些东西，你的代码应该可以工作。你不需要两个$（document）.ready调用，你应该将所有东西都包装在一起。因此，如果您将代码更改为：

$(document).ready(function(){
  $('.picture').mouseover(function(){
    $('.menu').fadeIn('fast');
  })
})

一切都应该运转正常。还要确保在CSS中，表格上没有显示或隐藏。

Answer 2

这是@Charlietfl建议的解决方案：

<强> HTML

<div class="picture-div">
    <img src="..." class="picture"/>
    <table class="menu">
    .......
    </table>
</div>

<强>的JavaScript

$(document).ready(function(){
    $('.picture-div').mouseover(function(){
        $('.menu').fadeIn('fast');
    })
    .mouseleave(function(){
        $('.menu').fadeOut('fast');
    })
    .mouseleave();
});

＆＃13;

$(document).ready(function() {
  $('.picture-div').mouseover(function() {
      $('.menu').fadeIn('fast');
    })
    .mouseleave(function() {
      $('.menu').fadeOut('fast');
    })
    .mouseleave();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="picture-div">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJpEmL0wgaSxG8Ne8PaY6C9uz39g4KNy9H8Gaiu-kLgLZbyqZp" class="picture" />
  <table class="menu">
    <tr>
      <td valign="top" width="130">
        <a href="#">Link 1</a>
        <br />
        <a href="#">Link 2</a>
        <br />
        <a href="#">Link 3</a>
        <br />
      </td>
      <td valign="top" width="130">
        <a href="#">Link 4</a>
        <br />
        <a href="#">Link 5</a>
        <br />
        <a href="#">Link 6</a>
        <br />
      </td>
      <td valign="top" width="130">
        <a href="#">Link 7</a>
        <br />
        <a href="#">Link 8</a>
        <br />
        <a href="#">Link 9</a>
        <br />
      </td>
    </tr>
  </table>
</div>

＆＃13;

使用jQuery在鼠标悬停图片时显示带有链接的表格

2 个答案: