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 - 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.