CODEWITHSUNDEEP
jqueryhtmlcss
rapture89
rapture89

Reputation: 135

How to perform multiple events CSS

This has been bugging me for a while, I was wondering what is the best way to make all elements within a div act differently on hover.

Example HTML

<div class="box">
<a href="">
<h1>Box Title</h1>
<span class="icon floatr"></span>
</a>
</div>

Now I'd normally do the following css;

 a.span {color:black}
  a.span:hover {color:red;}

But is there anyway to group them together; so that on hover it will action two different selectors without using JS?

I.E: Change the icon to red and the text adds a text shadow or something.

Upvotes: 0

Views: 615

Answers (2)

mrksbnch
mrksbnch

Reputation: 1842

In your case you can use :hover for the parent element, like so:

a:hover h1 {
   color: blue;
}

a:hover span {
   color: red;
}

Not for your particular case, but you could also use the sibling selector to target only the next sibling, like so:

.element:hover + .next-sibling {
   color: red;
}

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

:hover the parent element instead:

.box:hover h1 {
   /* styles */
}
.box:hover span {
   /* different styles */
}

Upvotes: 7

Related Questions