Как вызвать другой класс при наведении на CSS?

Question

Класс DIV - ПЕРВЫЙ. Я хочу называть класс SECOND on hover. Как я могу это сделать?

Я использую следующий код:

.first{ 
 
background:#F00; 
 
} 
 
.second{ 
 
background: #0F0; 
 
}

<div class="first"> This is DIV</div>

Answer 1

Вам не нужно использовать дополнительный класс, просто добавьте дополнительный стиль при наведении курсора мыши с использованием псевдо-селектор: парить

<style> 
.first{ 
background:#F00; 
} 
.first:hover{ 
background: #0F0; 
} 
</style> 

Как я очень добрый, я добавил пример того, как делать то, что вы просите, в чистом javascript также:

<style> 
.first{ 
background:#F00; 
} 
.second{ 
background: #0F0; 
} 
</style> 

<div class="first" onmouseover="change()" onmouseout="changeBack()"> This is DIV</div> 
<script> 
function change() { 
    var d = document.getElementsByClassName("first"); 
    d[0].className += " second"; 
} 
function changeBack() { 
    var d = document.getElementsByClassName("first"); 
    d[0].className = "first"; 
} 
</script> 

Answer 2

Ваш неправильный способ не только делать то, что вы ищете. Проверьте, как это сделать.

Live demo

HTML-код:

<div class="first"> This is DIV</div> 

CSS-код:

.first{ 
background:#F00; 
} 
.first:hover{ 
background: #0F0; 
cursor: pointer; 
} 

Объяснение

Чтобы создать эффект зависания, вам необходимо объявить :hover. Поэтому вместо создания нового класса вам нужно добавить :hover i.e псевдокласс в класс, где вы хотите, чтобы hover работал. Это сделает эффект зависания, который вы ищете.

Ссылка: W3 Hover reference

Надеется, что это помогает.

Answer 3

Hover первое поле, чтобы увидеть результат

Это, как вы могли бы сделать это в JavaScript.

document.getElementById ('idOfElement') получает ссылку на элемент.

Добавление на него события. В вашем случае вам нужны два события, которые являются onmouseover и onmouseleave.

let first = document.getElementById('first'), 
 
    sec = document.getElementById('second'); 
 

 
first.onmouseover =() => { 
 
    sec.style.background = 'black'; 
 
} 
 

 
first.onmouseleave =() => { 
 
    sec.style.background = 'red'; 
 
}

#first, #second { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    margin-bottom: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transition: all 0.3s linear; 
 
}

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

Вы также можете сделать это на CSS. Однако это ограничено. Вы не можете получить ссылку на свой родительский элемент и предыдущие элементы брата. Это то, что я знаю. (исправьте меня, если я ошибаюсь).

#first, #second { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    margin-bottom: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transition: all 0.3s linear; 
 
} 
 

 
#first:hover ~ #second { 
 
    background: black; 
 
}

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

Надеется, что это помогает. Cheers

Answer 4

Вы можете стилизовать элемент (с определенным классом), когда другой человек зависает в ограниченном количестве случаев. Основное ограничение: зависающий элемент должен быть помещен в код HTML до в стиле.

Подробнее о + и ~adjacent and general sibling combinators

.first{ 
 
background:#F00; 
 
} 
 
.second{ 
 
background-color: #0F0; 
 
} 
 
.first:hover ~ .second { 
 
    background-color: tomato; 
 
} 
 
.first:hover ~ .hello .second { 
 
    background-color: violet; 
 
} 
 
.hello { 
 
    background-color: beige; 
 
} 
 
.hello { 
 
    padding: 1rem; 
 
}

<div class="first"> This is DIV</div> 
 
<div> Some div</div> 
 
<div class="second"> I've class .second</div> 
 
<div class="hello"> 
 
    <div class="second"> Child of a (following) sibling of .first</div> 
 
</div>