Проблема с наведением мыши

  • Автор темы JDVU
  • 28
  • Обновлено
  • 15, May 2024
  • #1
Привет, у меня проблема с простым фрагментом кода, который я написал.

У меня есть наложенный div, который содержит еще один div (кнопку) в центре.

С помощью jQuery я добавил несколько классов для запуска анимации, но проблема в том, что когда я вхожу/выхожу из дочернего div, моя анимация наведения курсора мыши на основной div снова срабатывает. Вот код
 <script>

$(function(){

$(".card").mouseenter(function(){

$(this).find(".overlay").addClass('anim');

$(this).find(".plus").addClass('animScale');

});

$(".card").mouseleave(function(){

$(this).find(".overlay").removeClass('anim');

$(this).find(".plus").removeClass('animScale');

});

})

</script>

<div class="overlay">

<div class="plus">+</div>

</div>

.anim{

animation: appear 0.6s linear;

animation-fill-mode: forwards;

}

.animScale{

animation: grow 0.6s linear;

animation-fill-mode: forwards;

}

@keyframes appear{

from{opatcity: 0;}

to{opacity: 0.75;}

}

@keyframes grow{

from{transform: scale(0.5);}

to{transform: scale(1)}

}

Код (разметка):

JDVU


Рег
08 Nov, 2012

Тем
1

Постов
2

Баллов
12
  • 08, Jun 2024
  • #2
Что делает работу JavaScript, не говоря уже о крушении умственно ослабленного поезда того, как НЕ использовать JavaScript, который является jQuery. У вас есть CSS, используйте его.

Это называется :hover, используй. Точно так же я бы не стал тратить на это анимацию, простой переход должен справиться с этим.

хотя вы УВЕРЕНЫ, что вам не нужна НИКАКАЯ анимация при наведении мыши?!? Я бы, наверное, просто побежал назад. Предполагая, что .card является родительским элементом этих элементов и не требует ЛЮБОЙ анимации:
 
.overlay {
opacity:0;
transition:opacity 0.6s;
}

.card:hover .overlay {
opacity:1;
}

.plus {
transform:scale(0.5);
transition:transform 0.6s;
}

.card:hover .plus {
transform:scale(1);
}
Код (разметка): Если вы хотите, чтобы анимация запускалась назад при наведении курсора мыши, удалите строки с нулями и переместите другие переходы в основные элементы следующим образом:
  .overlay { opacity:0; transition:opacity 0s; /* no transition on mouse-out */ } .card:hover .overlay { opacity:1; transition:opacity 0.6s; } .plus { transform:scale(0.5); transition:transform 0s; /* no transition mouse-out */ } .card:hover .plus { transform:scale(1); transition:transform 0.6s; }
Код (разметка): Если они не являются дочерними элементами .card, попробуйте добраться до них, используя соседние одноуровневые селекторы.

Чтобы сказать наверняка, нам нужно увидеть полную разметку. Это просто не работа JS. Также в зависимости от того, что такое .card (скажите мне, что это не столь же умственно ослабленный список того, как НЕ использовать HTML и CSS, который является чушью!) вы также можете добавить :focus для навигации с помощью клавиатуры. Вы пишете код для альтернативной навигации, верно?
 

Игорь Широбоков


Рег
07 Mar, 2013

Тем
0

Постов
3

Баллов
3
Тем
49554
Комментарии
57426
Опыт
552966

Интересно