Question

首先，我的HTML标记在这里

<ul>
    <li>
        <form>...</form>
        <div>
            <div class="A"></div>
            <div class="B"><img class="wantToShow"></div>
        </div>
        <div class="C"></div>
    </li>
    <li>...</li>
</ul>

我想要做的是，当我将鼠标悬停在<li>上时，会显示小图像<img class="wantToShow">（如悬停）。

但是当我在每个<li>元素上添加事件时，会出现以下问题。

如果我使用jQuery.mouseover(<li>, function)，只要我在<li>中移动鼠标光标，就会显示<li>中的整个元素。
如果我使用jQuery.mouseenter(<li>, function)元素，我的鼠标光标首先进入，显示出来。在这种情况下，真正的问题是事件不会捕获<li>，而是<li>中的元素。

我能为此做些什么......谢谢！

Answer 1

我认为这样的事情就是你所追求的：

$('li').on('mouseover',function() {
  var $this = $(this);
  if($('.wantToShow').is(':hidden')) {
    $this.find('.wantToShow').show();
  } else {
    $this.find('.wantToShow').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li>
        <form>This is A</form>
        <div>
            <div class="A"></div>
            <div class="B">
              <img src='https://placebear.com/200/300' class="wantToShow">
          </div>
        </div>
        <div class="C"></div>
    </li>
    <li>This is B</li>
</ul>

在包装元素上制作事件

1 个答案: