Some of the most creative uses of hover are with images. You can also set the text color inside the same :hover rule, like this: Let's say you'd like to change the color of the text in your element with the background-switch class. You can change more than one thing at a time on hover, too. In this example, everything with the class "background-switch" will start out with a background color of pink, then switch to a background color of light blue when hovered. So, for example, if I wanted to give every HTML paragraph on a page a pink background when it's hovered, I'd write a CSS rule like this: p:hover You can apply a hover effect to any element on your blog by adding :hover after the element, ID, or class name in your CSS rule.
Css hover effects creative code#
Now that we've got that out of the way, let's play! If you're already familiar with CSS basics and would like to skip ahead to the live code demo, click here to open it up on Codepen. Don't rely on them to do something essential. It's best to treat :hover effects as "nice to have" design details. But, sometimes they don't work on touchscreens at all. Since hovering isn't a real thing on touchscreens, :hover effects are usually triggered on tap instead, and the effect is typically very brief. On a touchscreen, you're either touching something or you aren't - the screens haven't evolved enough to detect a finger hovering over the screen (yet!). The thing is, there's no real way to "hover" something on a touchscreen device. If your readers are visiting your blog on a computer, they'll see your hover effects exactly as you designed them to work, even on older browsers like Internet Explorer 7.īut, visitors on smartphones and tablets will have a different experience. The :hover pseudo-class was created with mouse use in mind. You can check out a list of more pseudo-classes at the Mozilla Developer Network, but here we'll just focus on :hover. There are lots of pseudo-classes available to web developers. The pseudo-class effect is triggered any time a certain condition is met, like, for example, when the element is hovered over by your reader's mouse. In CSS, a pseudo-class is a "fake" class that you can apply to any HTML element. Today I'm going to show you some basic examples of hover effects you can try on your own blog, but first I'm going to talk a little bit about what a pseudo-class is, and about :hover compatibility. Honestly, I didn't even think to add hover effects to the font tutorials because you can use the CSS :hover pseudo-class on just about everything! And then I realized that it must seem strange that I didn't cover hover effects at all when I talked about font style. Last month when I posted the Blog Font Style CSS series, Sara from Burnett's Boards asked about changing text color on hover.
0 kommentar(er)
