Если использовать псeвдоэлемент :hover и прописать стили конкретному элементу, то эти стили будут применены к нему. Но как сделать так, чтобы прописанные стили при наведении на элемент применялись к другому элементу?
Решение задачи зависит от взаимного расположения блоков в разметке.
.wrapper {
display: flex;
}
.trigger,
.target {
width: 50px;
height: 50px;
}
.trigger {
background-color: royalblue;
margin-right: 16px;
}
.trigger:hover + .target {
background-color: tomato;
}
<div class="wrapper">
<div class="trigger"></div>
<div class="target"></div>
</div>
.wrapper {
display: flex;
}
.trigger {
width: 50px;
height: 50px;
}
.trigger {
background-color: royalblue;
margin-right: 16px;
}
.trigger:hover .target {
width: 25px;
height: 25px;
background-color: tomato;
}
<div class="wrapper">
<div class="trigger">
<div class="target"></div>
</div>
</div>
let trigger = document.querySelector(".trigger");
let target = document.querySelector(".target");
trigger.addEventListener("mouseover", function() {
target.classList.add("active")
});
trigger.addEventListener("mouseleave", function() {
target.classList.remove("active")
});
.wrapper {
display: flex;
}
.trigger,
.target {
width: 50px;
height: 50px;
}
.trigger {
background-color: royalblue;
margin-left: 16px;
}
.target.active {
background-color: tomato;
}
<div class="wrapper">
<div class="target"></div>
<div class="trigger"></div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Есть у меня парсер музыки с ВК, так вот, он перестал работать, в чём может быть проблема?
Хочу от фильтровать массив, где есть значения "o" но что-то неправильно делаю, что надо изменить в коде? Чтоб массив отфильтровался и сохранял...
Есть крон, но он может запускать скрипт не чаще чем раз в минутуТак вот как сделать так, чтобы крон запускал скрипт, а он самоповторялся 5 раз...
Приветствую и сразу хочу подчеркнуть, что не интересует какое-либо другое решение, кроме как одна единственная операция с помощью функции...