(x)HTML/CSS - Bild som bakgrund vid mus över knapp
Jag har en simpel meny gjord med följande (x)HTML-kod:
<ul id="navbar">
<li><a class="rightborder" href="index.html"> Home </a></li>
<li><a class="rightborder" href="donate.html"> Donate </a></li>
<li><a class="rightborder" href="about.html"> About Us </a></li>
<li><a href="contact.html"> Contact Us </a></li>
</ul>
och CSS-kod:
#navbar {width:947px;
padding:0px;
margin:0px;}
#navbar li {display:inline;}
#navbar a {width:235.75px;
height:40px;
float:left;
padding:0px;
text-align:center;
text-decoration:none;
background-color:#485e49;
color:#FFFFFF;
line-height:240%;}
.rightborder {border-right:1px solid #FFFFFF;}
Resultat:
Nu till frågan: Hur gör jag så att när man tar musen över en knapp så får knappen i fråga en bakgrundsbild? Försökte med följande:
#navbar a:hover {background-image:url(knapp.jpg)}
Men det funkade inte, inget hände när musen gick över knappen, någon som vet hur man gör? Ni är också välkomna att påpeka i fall att jag gjort något onödigt/dumt i min CSS-kod, försöker lära mig.