javascript - JQuery - 鼠标离开

Question

我在下面有一个非常简单的代码。当我将鼠标悬停在其中一个红色小方 block 上时，会出现另一个大的彩色方 block 。

问题:当我将光标移开这个大方 block 时，这个方 block 将被 mouseleave().hide() 隐藏，但它不起作用。

请帮忙。

jsfiddle

HTML

<table class="table" style="width:100%">

  <tr>
    <td>
      <div class="hot-spot" data-target="black"></div>
      <div ID="black"></div>
    </td>
    <td>
      <div class="hot-spot" data-target="green"></div>
      <div ID="green"></div>
    </td>
        <td>
      <div class="hot-spot" data-target="blue"></div>
      <div ID="blue"></div>
    </td>
    <td>
      <div class="hot-spot" data-target="yellow"></div>
      <div ID="yellow"></div>
    </td>
  </tr>

</table>

JS

$(function() {
    $('.hot-spot').hover(function (e) {
    var square = $(this).data('target');
    $('#' + square).show();
    $('#' + square).mouseleave.hide();
  });

});

Answer 1

你只需要在 mouseleave 之后添加括号来表明它是一个函数:

$(function() {
  $('.hot-spot').hover(function(e) {
    var square = $(this).data('target');
    $('#' + square).show();
    $('#' + square).mouseleave(function() {
      $('#' + square).hide();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" style="width:100%">

  <tr>
    <td>
      <div class="hot-spot" data-target="black">a</div>
      <div ID="black">black</div>
    </td>
    <td>
      <div class="hot-spot" data-target="green">b</div>
      <div ID="green">green</div>
    </td>
    <td>
      <div class="hot-spot" data-target="blue">c</div>
      <div ID="blue">blue</div>
    </td>
    <td>
      <div class="hot-spot" data-target="yellow">d</div>
      <div ID="yellow">yellow</div>
    </td>
  </tr>

</table>