From the course: Design the Web: SVG Rollovers with CSS

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Controlling grouped SVG elements with CSS

Controlling grouped SVG elements with CSS - CSS Tutorial

From the course: Design the Web: SVG Rollovers with CSS

Start my 1-month free trial Buy for my team

Controlling grouped SVG elements with CSS

“

Now we're going to make use of the pseudo class that we assigned to the aqua pieces container, to show and hide multiple SVG elements as well. So in our CSS we're going to create a new rule that's going to target the aqua pieces class, then a space, then we're going to type .aqua_over. Put in our brackets, then we're going to set a display type of none. So that's going to initially hide that second group with a class of aqua_over. So once we do that, if we go back into our browser, you'll notice that I can move my cursor inside of where that SVG element is. And since the display type is set to none for that entire group, it doesn't trigger the rollover for the segment aqua. Now to get that group to show up when I do hover over the segment aqua, we're going to create a second CSS class that's going to use that pseudo class on the aqua pieces. So let's go back to our CSS. Let's come up here and copy the aqua pieces, hover pseudo class. Let's copy that to the clipboard. And after the…

Contents