Botão Rollover com CSS
Pessoal, tenho duas imagens diferentes para um botão Quando passar o mouse quero que troque as imagens. No meu código estou colocando isso:
#menu{
position:absolute;
left:265px;
top:1px;
width:auto;
height:auto;
list-style:none;
margin:o;
padding:0;
}display:inline;
} display: none;
/*position: absolute;*/
} display: block;
outline: none;
} display: block;
} width: 80px;
height: 132px;
background:url(btns_site/home.png) no-repeat;
left: 30px;
top: 49px;
} width: 80px;
height: 132px;
background: url(btns_site/home_over.png) no-repeat;
left: 30px;
top: 49px;
}Todo o código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Botoes</title>
<style type="text/css"><!--
*{
margin:0;
padding:0;
font-style:normal;
border:none;
}body{
background-image:url(imagens/fundoLaranja.png);
background-repeat:repeat-x;
background-color:#FFA50C;
}
#conteudo{
width:600px;
height:620px;
background:url(imagens/sombra.png) repeat-y center top;
position:relative;
margin:0 auto;
}
#logo{
background-image:url(imagens/logoMarca.png);
width:160px;
height:50px;
position:absolute;
top:42px;
left:38px;
}
#rodape{
background:url(imagens/sombraRodape.png) repeat-y center top;
height:20px;
width:600px;
margin:0 auto;
text-align:center;
/*position:absolute;
top:600px;left:78px;*/
}
/ Menu /
#menu{
position:absolute;
left:265px;
top:1px;
width:auto;
height:auto;
list-style:none;
margin:o;
padding:0;
}#menu li{
display:inline;
}#menu span {
display: none;
/*position: absolute;*/
}#menu a {
display: block;
outline: none;
}#menu a:hover span {
display: block;
}/Menu HOME/
#menu .home {
width: 80px;
height: 132px;
background:url(btns_site/home.png) no-repeat;
left: 30px;
top: 49px;
}#menu .home span {
width: 80px;
height: 132px;
background: url(btns_site/home_over.png) no-repeat;
left: 30px;
top: 49px;
}/Menu ALBUM/
#menu .album {
width: 80px;
height: 132px;
background:url(btns_site/album.png) no-repeat;
/*left: 82px;
top: 49px;*/
}#menu .album span {
width: 80px;
height: 132px;
background: url(btns_site/album_over.png) no-repeat;
/*left: 82px;
top: 49px;*/
}-->
</style>
</head>
<body>
<div id="conteudo">
<p id="logo"></p>
<ul id="menu">
<li><a href="#" class="home"><span></span></a></li><li><a href="#" class="album"><span></span></a></li><!--<li><a href="#"><img src="btns_site/fundo1.png" alt="fundo" /></a></li><li><a href="#"><img src="btns_site/fundo1.png" alt="fundo" /></a></li>-->
</ul>
</div>
<div id="rodape"><img src="imagens/rodape.png" alt="Rodapé" /></div>
</body>
</html>Espero que alguem tenha uma solução.. Desde já agradeço!
Discussão (4)
Carregando comentários...