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

Unlock this course with a free trial

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

Combining CSS hover states with SVG

Combining CSS hover states with SVG - CSS Tutorial

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

Combining CSS hover states with SVG

Now to create some simple roll overs inside our SVG, we can use the pseudo class. So lets come up here in the CSS and lets copy the segment red CSS roll, copy that to the clipboard. Lets hit a Return, lets paste that on a new line. And get your cursor after the segment red name, lets add a pseudo class so put column, hover. Next, we'll come over here and delete the fill color properties, and change them to BA0F11. Now with that in place, you can reload this in your browser. If you come over here to the SVG graphic and move your cursor over the item, you'll notice that we now get a hover state when we roll over that segment. Now what's interesting here is if I move my cursor up inside of this negative space here, you'll notice that the hover state is not triggered. It's only triggered when I hit exactly on this vector shape. Now this varies in behavior from more traditional web graphics in that the bounding box of the object is not the bounding box of the HTML element, but it's the…

Contents