Onmouseenter/Onmouseleave fadeOut wont work

Question

When hovering the .f_bb div, it should simply show up .f_bloc and add a class to it. When the hovering is over (when the cursor is out of it), it should fade out and hide. But I can't make it work, for some reason.

HTML

<div id="fc3"><div class="f_bb">test
<div class="f_bloc">roat</div></div></div>

CSS

.test {color: red}
.f_bloc {display: none}

JS

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseenter(function() {
        $(this).closest(".f_bloc").show();
        $(this).closest(".f_bloc").addClass("test");
    });
});

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseleave(function() {
        $(this).closest(".f_bloc").fadeOut( 1000, function() {
            $(this).closest(".f_bloc").hide();
        });
    });
});

Jsfiddle : https://jsfiddle.net/ebcm08tL/ UPDATED https://jsfiddle.net/ebcm08tL/2/

Answer 1

The problem is that you used .closest() method. With .children() method works fine to me, and you also have to include jquery if you didn't.

$(document).ready(function() {
$("#fc3 .f_bb").mouseover(function() {
  $(this).children(".f_bloc").show();
  $(this).children(".f_bloc").addClass("test");
 });
});

$(document).ready(function() {
$("#fc3 .f_bb").mouseleave(function() {
  $(this).children(".f_bloc").fadeOut( 1000, function() {
  $(this).children(".f_bloc").hide();
  });
 });
});

.test {color: red}
.f_bloc {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fc3"><div class="f_bb">test
<div class="f_bloc">roat</div></div></div>

Answer 2

jQuery uses .mouseenter() and .mouseleave(), not .onmouseenter() and .onmouseleave().

Answer 3

A good way to do it is to unbind any existing events (can assign names) first to avoid duplications:

    $("#fc3 .f_bb").unbind('mouseenter.fc3').on('mouseenter.fc3', function (event) {
        // mouseenter actions
    });

    $("#fc3 .f_bb").unbind('mouseleave.fc3').bind('mouseleave.fc3', function (event) {
        // mouseleave actions
    });

Answer 4

Try adding an id to your div which contains roat text and try using children() instead of closest() as the div you are trying to find is actually children.

Working demo

$(document).ready(function() {
  $("#fc3 .f_bb").mouseenter(function() {

    $(this).children("#block").show();
    $(this).children("#block").addClass("test");
  });

  $("#fc3 .f_bb").mouseleave(function() {
    $(this).children("#block").fadeOut(1000, function() {
      $(this).children("#block").hide();
    });
  });
});

.test {
  color: red
}
.f_bloc {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fc3">
  <div class="f_bb">test
    <div id="block" class="f_bloc">roat</div>
  </div>
</div>

Answer 5

I think thath your problem is with closest(), i use find() to find The class you want

$(document).ready(function() {
  $("#fc3 .f_bb").mouseenter(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.show();
    f_bloc.addClass('test');


  });
  $("#fc3 .f_bb").mouseleave(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.fadeOut( 1000, function() {
      f_bloc.hide();
    });
  });                
});

.test {color: red}
.f_bloc {display: none  }  

<div id="fc3">
  <div class="f_bb">
    test

    <div class="f_bloc"> roat </div>
  </div>
</div> 
<script src="https://code.jquery.com/jquery.js"></script>