Неожиданное поведение слайда слайда Jquery

Я нашел много похожих вопросов, но не смог найти ответ, который мог бы решить мою проблему.

У меня есть div с идентификатором «первый». Все, что я хочу, это сдвинуть другой div с идентификатором «второй» поверх первого, когда мышь находится на div «one» и сдвинуть div «второй», когда мышь находится вне этого div.

Приведенный ниже код работает хорошо, но имеет некоторые проблемы.

1) когда мошка внутри - скользит дважды.

2) когда второй div опущен, и я навожу указатель мыши на div, он снова скользит

Не могли бы вы помочь мне получить результат, который я хочу.

html

<div>
<div id="zero"><div>
<div id="my_hover">
    <div id="second"></div>
     <div id="first"></div>
</div>
<div id="third"></div>  
</div>

JS

$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });

javascript jquery
person EducateYourself    schedule 10.03.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Самый простой способ — добавить pointer-events: none; в CSS div #second и расположить его над div #first.

pointer-events: none; В дополнение к указанию, что элемент не является целью событий мыши, значение none указывает событию мыши пройти «сквозь» элемент и вместо этого нацелиться на все, что находится «под» этим элементом.
(...)< br> Элемент никогда не является целью событий мыши; однако события мыши могут быть нацелены на его элементы-потомки, если эти потомки имеют события указателя, установленные на какое-либо другое значение. В этих обстоятельствах события мыши будут запускать прослушиватели событий в этом родительском элементе по мере необходимости на пути к потомку или от него во время фаз захвата события или всплывающей подсказки.

Справочник

$(document).ready(function(){
    var slide = $("#second");
    $("#first").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });
});
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>

Другой способ — вставить эти два элемента внутрь другого элемента и использовать для этого элемента hover вместо div #first. Таким образом, вся область чувствительна:

$(document).ready(function(){
    var slide = $("#second");
    $(".my-hover").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });

    //for demo:
    $('.btn').click(function(){
        alert('it works!');
    });
 
});
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
    <div id="second"><button class=btn>BUTTON</button></div>
    <div id="first">First</div> 
</div>

person Artur Filipiak    schedule 10.03.2015
comment
Это предотвращает взаимодействие с мышью. - person Jeremy Thille; 10.03.2015
comment
@EducateYourself Да. Обновленный ответ со ссылкой на pointer-events - person Artur Filipiak; 10.03.2015
comment
Использование pointer-events: none; - плохая практика, IMO. Предположим, OP хочет добавить кнопку во второй div, тогда эта кнопка больше не будет нажиматься. - person frogatto; 10.03.2015
comment
@EducateYourself Вот почему я опубликовал другое решение. В целом это имеет больше смысла. Просто вложите два div в другой (второй пример) - person Artur Filipiak; 10.03.2015
comment
это работает :) У меня также есть еще одна небольшая проблема, и, возможно, вы можете мне помочь. Я только что отредактировал свой html-код, чтобы вы могли понять ситуацию. У меня есть еще один div с id=zero над div my-hover, и в результате «второй» div скользит вниз по «нулевому» div вместо «первого» div. - person EducateYourself; 10.03.2015
comment
@EducateYourself, похоже на проблему с позиционированием. Он работает на Fiddle. PS. вы должны закрыть этот zero div (отсутствует закрывающая косая черта) - person Artur Filipiak; 10.03.2015
comment
Ваш код работает нормально, но я не могу понять, что не так с моим кодом css. Я просто скопировал свой код css в скрипку. Не могли бы вы взглянуть. jsfiddle.net/EducateYourself/qrptoren/4 - person EducateYourself; 10.03.2015
comment
@EducateYourself, добавьте clear:both; правило CSS к #my_hover - Fiddle (это потому, что вы используете float:left в своих div) - person Artur Filipiak; 10.03.2015

arrow_upward
1
arrow_downward

Я попробовал ваш код, и он работает хорошо:

$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });

См. пример: http://jsfiddle.net/dwxxpabq/

person user4571629    schedule 10.03.2015
comment
Я хочу, чтобы второй div скользил НАД первым. Извините, что не упомянул об этом. Я отредактировал свой вопрос. - person EducateYourself; 10.03.2015

arrow_upward
1
arrow_downward

Ладно, вот:

var $second=$("#second");

$("#first").hover(function(){
   $second.stop().slideDown("slow");
},function(){
   $second.stop().slideUp("slow");
  });
div{
    width: 100px;
    height: 100px;
    background: green;
    margin-right: 10px;
    float: left ;
    position: absolute;
    top:0;
    left:0;
}
#second{
  display: none;
  background: yellow;
  pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first">1</div>
<div id="second">2</div>

person Jeremy Thille    schedule 10.03.2015
comment
спасибо, но я хочу, чтобы второй div скользил НАД первым. Извините, что не упомянул об этом. Я отредактировал свой вопрос. - person EducateYourself; 10.03.2015
comment
Без проблем. Еще три строчки CSS. Ответ обновлен. - person Jeremy Thille; 10.03.2015
comment
отличный! ты решил первую задачу. но второй все еще существует. Я не хочу, чтобы он скользил вверх, когда мышь перемещается внутри div, но только тогда, когда мышь покидает поле div. - person EducateYourself; 10.03.2015
comment
Я вижу, что и первая проблема не решена. он все еще скользит несколько раз, и когда доходит до курсора мыши, он не может скользить дальше. - person EducateYourself; 10.03.2015
comment
Эм-м-м? Он отлично работает для меня. Div 2 полностью скользит вниз, а затем остается нажатым, пока указатель мыши находится над div 1. Какой браузер вы используете? - person Jeremy Thille; 10.03.2015
comment
Я добавил pointer-events:none в div 2, это должно помочь. - person Jeremy Thille; 10.03.2015
comment
Черт, я пришел слишком поздно. Это уже было предложено и принято в качестве ответа. Очень жаль. - person Jeremy Thille; 10.03.2015