Используйте hover на div и mouseout одновременно - PullRequest
Новая
       51

Используйте hover на div и mouseout одновременно

0 голосов
/ 16 сентября 2018

Я работаю со сценариями jQuery hover и mouseout, но проблема в том, что когда я устанавливаю hover на div, когда работает mouseout, div скрывается и отображается непрерывно (мигает).

Как преодолеть эту проблему?

Вот мой код: 

<style>
 .append_div{

 position: absolute;
    top: 8%;
    display: none; 
 background-color: pink;
    border-right: 0px;
    left: 0px;
    padding: 30px;
    display:none;
}

</style>

<body>
  <div class="menu">
  Hover Me 

  </div>

  <div class="append_div">

  </div>


<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
  $('.menu').hover(function(){

    $(".append_div").show();
    $(".append_div").css({"width":"170px","z-index":"1078"});

});
$( ".menu" ).mouseout(function() {
  $(".append_div").hide('slow');
});
</script>

</body>

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Если причину проблемы быстро устранить, вы можете устранить ее с помощью функций stop() и finish(). 

$(".append_div").css({"width":"170px","z-index":"1078"});

$('.menu').hover(function(){
    $( ".append_div" ).finish();
    $(".append_div").show();

});
$( ".menu" ).mouseout(function() {
    $( ".append_div" ).finish();
    $(".append_div").hide('slow');
});

https://jsfiddle.net/63dofz48/16/

или лучше для глаз с двумя медленными эффектами

https://jsfiddle.net/63dofz48/10/

0 голосов
/ 16 сентября 2018

Если проблема мигает при наведении курсора и быстрое отключение мыши, попробуйте указать задержку при скрытии happend_div: 

$( ".menu" ).mouseout(function() {
    setTimeout(function() {
        $(".append_div").hide('slow');
    }, 500);
});
...