Rollovers using only CSS

In the past we have posted on how to create rollovers using CSS. To do this, we used a sprite to create the rollover effect. You can also create a rollover effect by using just CSS.

Let’s first look at the CSS code that will allow us to create this effect.

<style>
.menu a:hover {
display: inline;
color: #3979ba;
background-color: #76b71a;
font-weight: bold;
padding: 5px;
}
.menu a{
display: inline;
color: #76b71a;
background-color: #3979ba;
font-weight: bold;
padding: 5px;
}
.menu li{
display: inline;
}
</style>

So far we have uses the pseudo-class :hover, and applied the effect to any a tag with in the menu class. What we did with the :hover is invert the colors of the text and background, everything else says the same. If the other attributes did not stay the same the rollover effect would not look proper. We also make all the li elements display in a row with the inline attribute.

Now for the HTML code

<ul class=”menu”>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>

As you see the HTML code is just an unordered list that has the class menu applied to it. In each list element, we have a link for our menu.

Topics: CSS, Design, Web Development