How to call another class on hover in CSS?

Question

The class of DIV is FIRST. I want to call class SECOND on hover. How can I do this?

I am using following code:

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

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

Answer 1

You don't need to use an additional class, just add the additional style on hover using the pseudo-selector :hover

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

As i am very kind, i have added an example of how to do what you are asking in pure javascript also:

<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

Your above way is not correct to do what you are looking for. Check the below to know how to do it.

Live demo

The HTML code:

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

The CSS Code:

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

Explanation

You need to declare :hover to create hover effect. So instead of creating a new class, you need to add :hover i.e a pseudo class to the class where you want the hover to work. This will make the hover effect you are looking for.

Reference: W3 Hover reference

Hope this helps.

Answer 3

You can style an element (with a certain class) when another one is hovered in a limited number of cases. Main constraint: the hovered element must be placed in HTML code before the styled one.

More about + and ~ the 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>

Answer 4

Hover the first box to see the result

This is how you would do it in javascript.

document.getElementById('idOfElement') is getting element reference.

Adding an event on it. In your case, you need two events which is onmouseover and 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>

You can also do this on css. However, this is limited. You can't get reference to your parent element and previous sibling elements. That's what I know. (correct me if I am wrong).

#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>

Hope it helps. Cheers