Как я могу упростить объекты в CSS или JS для определенных элементов?
https://codepen.io/jenny0515/pen/KKZKyaB
Если вы откроете ссылку выше, вы увидите, что на какой бы куб я не навел курсор, тот, на который наведен курсор, останавливается и становится больше, в то время как другие резко останавливаются и также становятся больше. Но то, что я пытался достичь, это то, что пока я наводил курсор на куб, который ослаблялся, остальные, на которых не зависали, должны ослабляться. Я не думаю, что это возможно в CSS, но, поскольку я новичок в кодировании, может быть, есть шанс? Но если нет, я могу использовать JS, чтобы попытаться перекрыть кубы, на которые не наводят курсор, чтобы они могли сжиматься или уменьшаться, в то время как тот, на котором наведен курсор, ослабляется, последний без какой-либо помощи со стороны JS, если возможно.
Вот предварительный просмотр моего HTML-кода, но, пожалуйста, откройте ссылку выше:
<div class = "div">
<div class = "circle">
<div class = "stop-anim">
<div class = "ease-in">
<div class = "cube"><a href = ""></a></div>
<div class = "cube"><a href = ""></a></div>
<div class = "cube"><a href = ""></a></div>
</div>
</div>
</div>
</div>
Я сделал несколько попыток, используя только CSS, но они не сработали.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь js не нужен.
Прежде всего, определите переходы для всех кубов, а не только для :hovered. В любом случае он будет воспроизводиться только при изменении свойств:
.ease-in .cube{
transition: width 2s ease-in, height 2s ease-in;
}
Здесь я перечисляю только свойства, которые мы собираемся изменить с помощью transition, а не animation.
Затем измените :hover target .cube реквизит:
.ease-in .cube:hover{
width:100px;
height:100px;
}
И остальные кубики:
/* Selector takes cubes inside a hovered .ease-in, but those that are not hovered by themselves */
.ease-in:hover .cube:not(:hover){
width:15px;
height:15px;
}
Это сработало, но не останавливало другие кубы, которые не находились в режиме зависания, пока я не добавил «pause-animation-play-state» в раздел «.ease-in:hover .cube:not(:hover)». Спасибо за помощь!