CODEWITHSUNDEEP
htmlcss
Muazzam khan
Muazzam khan

Reputation: 18

How can I apply css properties on more then two html elements when it hover in any of the box

How can I apply css properties on more then two html elements when it hover in any of the box and the properties of both elements can change.

.tab-sec:hover{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
    h5{
        color: #fff;
    }
}

I have tried this way but it is not working.

Upvotes: 0

Views: 45

Answers (3)

Deepak Pahwa
Deepak Pahwa

Reputation: 31

Try this one. This code is for .scss

.tab-sec{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
    &:hover {
/* for tab sec*/
    background-color: #ff000;
/*for child elements*/
    h5{
        color: #fff;
    }
  }
}

Upvotes: 0

Shakir Ahamed
Shakir Ahamed

Reputation: 1308

Try like this,

<!DOCTYPE html>
<html>
<head>
<style>

.over_class:hover {
   border-style: solid;
   border-color:#1b9927;
   color: hotpink;
}
  
</style>
</head>
<body>
<input type="text" class="over_class" /><br/></br/>
<input type="text" class="over_class" /></br/></br/>
<input type="button" class="over_class" value="Submit" />  
  
</body>
</html>

Upvotes: 0

zgood
zgood

Reputation: 12571

You can only nest styles with CSS preprocessors like LESS and SASS.

I think to get what you are after you just need to write your style like this:

.tab-sec:hover{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
}

.tab-sec:hover h5{
    color: #fff;
}

Upvotes: 3

Related Questions