![\"mouseenter-mouseleave\"](\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/11\/mouseenter-mouseleave.png\")
<\/p>\nEl evento MouseEnter se produce cuando el puntero del rat\u00f3n est\u00e1 sobre el elemento seleccionado. El m\u00e9todo MouseEnter() activa el evento MouseEnter, o atribuye una funci\u00f3n a ejecutar cuando se produzca un evento MouseEnter. Este evento se utiliza a menudo junto con el evento MouseLeave.<\/p>\n
El evento MouseLeave se produce cuando el puntero del mouse sale del elemento seleccionado. El m\u00e9todo mouseleave() activa el evento MouseLeave o atribuye una funci\u00f3n a ejecutar cuando se produzca un evento MouseLeave.<\/p>\n
En el ejemplo que vamos a ilustrar precisamente hacemos una combinaci\u00f3n de ambos. Vamos a tener varios paneles con una imagen que al pasar por encima visualizaremos informaci\u00f3n al respecto. La imagen se va a desplazar para arriba visualiz\u00e1ndose el texto con un efecto parecido al abrir una persiana.<\/p>\n
<\/p>\n
Que necesitaremos para conseguir este efecto con jQuery?<\/p>\n
Incluir los estilos necesarios:<\/p>\n
.element {\r\n\u00a0\u00a0 \u00a0border: 1px solid #CCCCCC;\r\n\u00a0\u00a0 \u00a0background: #EEEEEE;\r\n\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 height: 120px;\r\n\u00a0\u00a0\u00a0 margin-right: 10px;\r\n\u00a0\u00a0\u00a0 overflow: hidden;\r\n\u00a0\u00a0\u00a0 position: relative;\r\n\u00a0\u00a0\u00a0 width: 317px;\r\n}\r\n\r\n.element a {\r\n\u00a0\u00a0 \u00a0text-decoration: none;\r\n\u00a0\u00a0 \u00a0color: #000;\r\n}\r\n\r\n.img, .description {\r\n\u00a0\u00a0 \u00a0height: 120px;\r\n}\r\n\r\n.img {\r\n\u00a0\u00a0 \u00a0margin-top: 0;\r\n\u00a0\u00a0 \u00a0background: #EEEEEE;\r\n}\r\n\r\n.description {\r\n\u00a0 background: #EEEEEE;\r\n\u00a0 color: #000;\r\n\u00a0 font-family: Arial;\r\n\u00a0 font-size: 12px;\r\n}\r\n\r\n.description p {\r\n\u00a0\u00a0 \u00a0padding:0 0 0 5px;\r\n}<\/pre>\nIncluir la librer\u00eda jQuery y los scripts necesarios para generar el efecto:<\/p>\n
<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$(\".element\").on({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0mouseenter: function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 $(this).find('.img').stop().animate({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"margin-top\": \"-120px\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0},\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0mouseleave: function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 $(this).find('.img').stop().animate({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"margin-top\": 0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0 \u00a0\u00a0 \u00a0});\r\n});\r\n<\/script><\/pre>\nY ahora solo queda por ver las etiquetas html a incorporar en tu <body>:<\/p>\n
<div class=\"element\">\r\n\u00a0\u00a0 \u00a0<a href=\"https:\/\/www.jose-aguilar.com\/blog\/secciones\/prestashop\/\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"img\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/prestashop.png\" \/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"description\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p>En esta p\u00e1gina encontrar\u00e1s un mont\u00f3n de trucos para hacer y mejorar tus tiendas virtuales desarrolladas con Prestashop.<\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <\/a>\r\n<\/div>\r\n...<\/pre>\n