Problema con efecto de menu, les describo el problema que tengo:
estoy practicando con un efecto basico para un menu con css3, javascript, con etiquetas ul , li, y varios links de pruebas. las etiquetas li tienen unas dimensiones ya definidas (colocados por mi) y colores de fondo aleatorios, cuando paso el puntero por encima de las li, estas crecen en tamaño y ademas se mueve 10px arriba de su posicion original.
el problema esta en que cuando paso el puntero por los enlaces dentro de las li, estas regresan a su tamaño y posicion original.
¿como evito esta situacion?
Aqui esta el codigo css, javascript, y html para mayor orientacion.
Código:
ul{
background: #555;
position: relative;
top: 30px;
left: 50px;
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
ul li.item{
box-shadow: -5px -5px 15px #888888;
width: 100px;
height: 40px;
margin: 0 0;
padding: 5px 5px;
position: absolute;
border: 1px solid black;
border-radius: 10px 0;
opacity: 0.5;
transform: skew(-10deg,-20deg);
-ms-transform: skew(-10deg,-20deg); /* IE 9 */
-webkit-transform: skew(-10deg,-20deg); /* Safari and Chrome */
-o-transform: skew(-10deg,-20deg); /* Opera */
-moz-transform: skew(-10deg,-20deg); /* Firefox */
list-style-type: none;
}
ul li.item:hover{
width: 150px;
height: 60px;
opacity: 1;
box-shadow: none;
};
ul li a{
font: 1em sans-serif;
text-decoration: none;
}
Código:
jQuery(document).ready(function() {
$('.item').each(function(index, elemento){
var r = Math.round(255*Math.random());
var b = Math.round(255*Math.random());
var g = Math.round(255*Math.random());
var color = "rgb("+r+","+b+","+g+")";
console.log(color);
$elemento = $(elemento);
$elemento.css({
'z-index':index,
'background-color':color,
//'left':""+10*index+"px",
'top':""+30*index+"px",
})
.mouseover(function(e){
var pos = $(e.target).position();
pos.top += 10;
$(e.target).css('top',pos.top);
})
.mouseout(function(e){
reset_posicion();
});
});
});
var reset_posicion = function(){
$('.item').each(function(index,elemento){
$(elemento).css('top',""+30*index+"px");
});
}
Código:
<ul> <li class="item"><a href="#" title="android">Android</a></li> <li class="item"><a href="#" title="android">PHP</a></li> <li class="item"><a href="#" title="android">Node.js</a></li> <li class="item"><a href="#" title="android">Wordpress</a></li> <li class="item"><a href="#" title="android">Python</a></li> </ul>
