CSS trick to change background color of a link when mouse hover

Simple and straight forward. No JavaScript needed, just pure CSS and HTML

by Duke Dinh

HTML

<ul id="menu">
    <li id="link1"><a href="#">Discussions</a></li>
    <li id="link2"><a href="#">Polls</a></li>
    <li id="link3"><a href="#">News</a></li>
    <li id="link4"><a href="#">Announcements</a></li>
</ul>

<div id="content">STUFF</div>

CSS

body {
    font-family     : Calibri;
    font-size       : 13px;
}

#menu {
    margin: 0;
    padding: 0;
    width: 190px;
    float: left;
}

#menu li {
    margin: 1px;
    padding: 0;
}

#menu li a {
    color           : #e0e0e0;
    text-decoration : none;
    display: block;
    padding: 5px;
}

#menu li a:hover {
    color           : #ffffff;
    background-color: red;
}

#link1 a {
    background-color: #083365;
}

#link2 a {
    background-color: #073b77;
}

#link3 a {
    background-color: #06448a;
}

#link4 a {
    background-color: #064a97;
}

#content {
    margin-left: 200px;
}