Foros del Web - Ver Mensaje Individual

emprear · #5 (**permalink**) 19/03/2013, 19:50

Según lo veo te está complicando, hacé un sprite de 2 imágenes por botón y utilizá el pseudoatributo hover de css

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efecto hover css</title>
<style type="text/css">
/*<![CDATA[*/
 
a#uno{
width: 100px;
height: 25px;
background-position: center top;
background-image: url('boton_uno.jpg');
border: none;
display:block;
}
a#uno:hover{
background-position: center -25px;
}
 
a#dos{
width: 100px;
height: 25px;
background-position: center top;
background-image: url('boton_dos.jpg');
border: none;
display:block;
}
 
a#dos:hover{
background-position: center -25px;
}
 
a{
margin: 3px;
}
/*]]>*/
</style>
</head>
<body>
<a href="uno.html" id="uno"><!-- fix --></a>
<a href="dos.html"  id="dos"><!-- fix --></a>
</body>
</html>

Demo
http://foros.emprear.com/css/over_in...lover-css.html

Saludos