Onmouseenter/Onmouseleave fadeOut не работает

Question

При зависании div .f_bb он должен просто показать .f_bloc и добавить к нему класс. Когда зависание заканчивается (когда курсор выходит из него), он должен исчезать и скрываться. Но по какой-то причине я не могу заставить его работать.

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/ ОБНОВЛЕНОhttps://jsfiddle.net/ebcm08tL/2/

Answer 1

Проблема в том, что вы использовали метод .closest(). С .children() метод работает отлично для меня, и вы также должны включить jquery, если вы этого не сделали.

$(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 использует .mouseenter() и .mouseleave(), а не .onmouseenter() и .onmouseleave().

Answer 3

Хороший способ сделать это состоит в отвязать любые существующие события (можно присваивать имена) первым, чтобы избежать дублирования:

$("#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 добавляя id к вашему div который содержит roat текст и попробуйте использовать children() вместо closest() как div Вы пытаетесь найти на самом деле детей ,

Рабочая демо

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

Я думаю, тат вашей проблемы с ближайшим(), я использую find() найти класс, который Вы хотите

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