<style type="text/css">
/* Abaixo é definido a largura e a posição inicial do background para cada item do menu */
#button1{
width:102px;
background-position:0px 0px;
}
#button2{
width:115px;
background-position:-102px 0px;
}
#button3{
width:115px;
background-position:-217px 0px;
}
/* E abaixo é definido a posição do background para cada item do menu, ao passar o mouse sobre eles */
#button1:hover{
background-position:0px -280px;
}
#button2:hover{
background-position:-103px -280px;
}
#button3:hover{
background-position:-219px -280px;
}
/* E abaixo são os estilos comuns dos itens do menu, inclusive a imagem de background */
ul{
margin:0px;
padding:0px;
}
.item_menu{
margin:0px;
padding:0px;
list-style:none;
cursor:pointer;
float:left;
height:70px;
background-image:url('sprite.jpg');
}
</style>
<ul>
<li class="item_menu" id="button1"></li>
<li class="item_menu" id="button2"></li>
<li class="item_menu" id="button3"></li>
</ul>
Question
Alex0007
Olha só, tem o seguinte código:
<style type="text/css"> /* Abaixo é definido a largura e a posição inicial do background para cada item do menu */ #button1{ width:102px; background-position:0px 0px; } #button2{ width:115px; background-position:-102px 0px; } #button3{ width:115px; background-position:-217px 0px; } /* E abaixo é definido a posição do background para cada item do menu, ao passar o mouse sobre eles */ #button1:hover{ background-position:0px -280px; } #button2:hover{ background-position:-103px -280px; } #button3:hover{ background-position:-219px -280px; } /* E abaixo são os estilos comuns dos itens do menu, inclusive a imagem de background */ ul{ margin:0px; padding:0px; } .item_menu{ margin:0px; padding:0px; list-style:none; cursor:pointer; float:left; height:70px; background-image:url('sprite.jpg'); } </style> <ul> <li class="item_menu" id="button1"></li> <li class="item_menu" id="button2"></li> <li class="item_menu" id="button3"></li> </ul>Veja o exemplo online
é um botao que muda a posiçao do background ao passar o mouse em cima, ou clicar
o código ta funcionando no firefox, mais não funciona no IE
O estranho é que funciona nos dois navegadores nesse site "http://blog.idealmind.com.br/javascript/background-css-animado/"
Queria saber o que ta errado com o código
Edited by Alex0007Link to comment
Share on other sites
5 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.