У меня есть функция jquery, которая при наведении показывает скрытый div сбоку, и она отлично работает. Что я хотел добавить, так это когда я наводил курсор на показанный div, т.е. box2 div исчезает, поэтому я не могу взаимодействовать с box2, как я могу сделать, чтобы окно 2 оставалось невидимым, когда я наводил на него курсор, а при наведении он исчезает очередной раз. Я могу легко сделать это с помощью ванильного javascript, но мне нужен эффект затухания jquery, так как я могу сделать это с помощью jquery. Любая помощь приветствуется. Заранее спасибо.

$("#box1").hover(function(){
    $("#box2").fadeIn("slow");
},
function(){
    $("#box2").fadeOut();
});
.box1 {
  position: absolute;
  left: 4%;
  width: 20%;
  height: 10%;
  background-color: black;
}

.box2 {
  position: absolute;
  left: 24%;
  width: 20%;
  height: 30%;
  background-color: grey;
  display:none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
1
seriously 9 Июн 2021 в 01:52

2 ответа

Лучший ответ

Вот 2 способа справиться с этим. Тот, который закомментирован, будет держать поле 2 видимым, пока вы не выйдете из окна 2.

Другой (без комментариев) установит короткий таймер и проверит, не превышаете ли вы по-прежнему поле 2. Я думаю, что это то, что вы ищете.

let ontarget = false
$("#box1, #box2").hover(function(e) {
    $("#box2").fadeIn("slow");
    ontarget = e.target.id == 'box2'
  },
  function(e) {
    // keep open unless mouse out of box 2
    //if (e.target.id != 'box1') $("#box2").fadeOut();

    // after a short delay (100 ms) test to see if we're still over box2, if so do nothing.
    // though if we mouse out it will rerun this if statement to close it like you expect
    setTimeout(() => {
      if (!ontarget || e.target.id == 'box2') $("#box2").fadeOut();
      if (e.target.id == 'box2') ontarget = false
    }, 100)

  });
.box1 {
  position: absolute;
  left: 4%;
  width: 20%;
  height: 10%;
  background-color: black;
}

.box2 {
  position: absolute;
  left: 24%;
  width: 20%;
  height: 30%;
  background-color: grey;
  display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
1
Kinglish 8 Июн 2021 в 23:44

У вас есть несколько вариантов. Во-первых, вы можете заключить оба поля в <div> и просто изменить код jquery, чтобы отображать div при наведении курсора.

Другой вариант - использовать атрибут css !important (однако, это плохая привычка), чтобы добавить другое правило стиля для его отображения. Это выглядело бы так:

.box2:hover {
     display:block;
}

Не стесняйтесь комментировать любые вопросы! Удачи!

0
Finn_Lancaster 8 Июн 2021 в 23:01