CODEWITHSUNDEEP
htmlcss
RainerS
RainerS

Reputation: 521

add a class without jquery if hover another class

i've the following html structure

<div id="maindiv" class="cl_maindiv">
    <label>123</label>
    <span class="cl_span_icon"> :-)) </span>
    <div id"icon_content_div" class="cl_icon_content"> more happy faces :-))   </div>                              
</div>

For this i want, on hover THIS span with class "cl_span_icon" (pay attention, i have a lot of same content, and i only want, that this works for this, inside this div i'm hover the span), add the "cl_showme" class to the div id="icon_content_div" .

So i try it with

.cl_maindiv>.cl_span_icon:hover .cl_showme{
  display:block;
}

What is the right way to do it?

thanks a lot.

Upvotes: 1

Views: 287

Answers (1)

FZs
FZs

Reputation: 18619

Adding a class, unfortunately, impossible with plain CSS.
To do this you must use JavaScript.

But, if you don't add a class, you can do it by CSS pseudo-classes (like :hover). This won't add the class, but your example can work with a little edit.

I think that you'll need something like this:

.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
  /*Styles without :hover*/
  display:none;
}
.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
  /*Styles with :hover*/
  display:block;
}
<div id="maindiv" class="cl_maindiv">
    <label>123</label>
    <span class="cl_span_icon"> :-)) </span>
    <div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>                              
</div>

Upvotes: 1

Related Questions