CODEWITHSUNDEEP
javascriptjqueryhtmlcss
abcid d
abcid d

Reputation: 2953

JQuery - mouseleave

I have a quite simple code below. When I hover one of small red squares, another large color square appears.

Problem: When I move the cursor away this large square, this square will be hidden by mouseleave().hide(), but it doesn't work.

Please help.

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

});

Upvotes: 1

Views: 56

Answers (2)

MichaelvE
MichaelvE

Reputation: 2578

You just need to add brackets after mouseleave to show it's a function:

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

Upvotes: 1

cody
cody

Reputation: 11157

mouseleave takes a function as an argument:

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

Upvotes: 0

Related Questions