How can i affect more than one class on hover

Issue

I want to affect element’s display,color or something when i hover a element.Class names can be different. Will not always contain sub.

Example:

.main{
  background:yellow;
  display:inline-block;
}
.sub{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.sub2{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.main:hover .sub,sub2{
  opacity:1;
}
<div class='main'>
  <div class='sub'></div>
    <div class='sub'></div>
    <div class='sub'></div>
  <div class="sub2"></div>
</div>

I can do it like that but its look like dublicate.If i can do it will save 30 lines of code. Can i do it at once. Is it possible?

.main:hover .sub{
  opacity:1;
}

.main:hover .sub2{
  opacity:1;
}

Solution

From your question it is unclear what your goal is.
maybe this helps:

.main:hover .sub, .main:hover .sub2{
  opacity:1;
}

In css (or scss) you can target multiple elements by separating them with a comma.

Answered By – André

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published