Bueno este tuto ya lo avia posteado, lo repetire n.n.
Es para hacer un menu elegante y moderno. (se me acabaron los eslogans xD):dash:
Una captura:
[attachment=938]
Bueno entonses para hacer esto vamos a las global
Cita:.img_list_hp {
-moz-border-radius:6px;
-webkit-border;
-radius:6px;
border:1px solid #C0C0C0;
border-radius:6px;
color:#FFF!important;
float:left;
font-size:11px;
margin:auto 5px auto auto;
padding:0;text-align:center;
width:auto
}
.img_list_hp:hover {
background-color:#bebebe;
}
.img_list_hp img {
padding:8px 15px;
}
.img_list_hp span {
background:url(http://emuxela.net46.net/images/gamenow/tcat.png) top left repeat-x;
display:block;
padding:0 10px
color: #666;
border-bottom: 1px solid #bebebe;
text-shadow: 1px 1px 0 #fff;
font-size: 12px;
}
.img_list_hp a {
color:#666!important;
text-decoration:none
}
#img_list_alt {
background-image:url(http://i31.servimg.com/u/f31/13/31/18/01/flesha10.png);
background-position:20px 0;
background-repeat:no-repeat;
padding-left:55px;
padding-top:13px
}
y luego en la plantilla de header o welcome user:
Cita:<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('¡Pasa el Mouse por encima de las imágenes para saber más sobre nuestro servicio!!');
});
});
</script>
<div><div class="img_list_hp"> <a href="LINK"><img src="ICON" alt="Descripcion" height="50"><span>Titulo </span></a></div>
<div style="clear: both;" id="img_list_alt">¡Pasa el Mouse por encima de las imágenes para saber más sobre nuestro servicio!!</div>
y listo :thumbsup: espero les sirva y les guste