¿Cómo puedo mostrar una imagen con un efecto cuando el cursor está sobre un menú respectivo como esta utilizando jquery o css?
¿Puedo hacerlo solo por css, o tengo que usar jquery?
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu img" ).on( "click", function() {
$("#menu img" ).hide( 1500 );
});
});
</script>
</head>
<body>
<button id="btn" type="button">Click Me!</button>
<div id="menu">
<ul>
<li><a href="">Menu1<img src="/images/images/1.jpg" /></a></li>
<li><a href="">Menu2<img src="/images/images/2.jpg"/></a></li>
<li><a href="">Menu3<img src="/images/images/3.jpg"/></a></li>
</ul>
</div>
</body>
</html>
Respuestas
1 para la respuesta № 1No tienes que usar JavaScript / jQuery para mostrar una imagen con el mouse del mouse. Puedes usar CSS simple:
HTML
<ul id="menu">
<li></li>
...
</ul>
CSS
#menu li:hover {
background-image: url("path/to/my/image.png");
background-position: 10px 10px /* set x and y coordinates */
}
Pero si desea agregar un efecto a la aparición de la imagen, tendrá que usar jQuery como está redactado en la respuesta de Tushars.
(En realidad, en CSS3 puedes usar animaciones también; ejemplos aquí. Pero tenga en cuenta que esto puede causar problemas de compatibilidad entre navegadores y descendentes.)
1 para la respuesta № 2
Utilice la transición CSS:
#menu li img {
-o-transition:color .2s ease-out, background 2s ease-in;
-ms-transition:color .2s ease-out, background 2s ease-in;
-moz-transition:color .2s ease-out, background 2s ease-in;
-webkit-transition:color .2s ease-out, background 2s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background 2s ease-in;
background-image: url("path/to/my/image.png");
}
#menu li img:hover {
background-image: url("path/to/my/image.png");
}
Cambiar el background-image o el background-position en :hover
0 para la respuesta № 3
/* Hide all images first, so that they don"t appear until you hover */
$("#menu li img").hide();
$("#menu li").hover(function(){
$(this).find("img").fadeIn("slow");
},function(){
//do what you want when mouse out
});
0 para la respuesta № 4
// Cargar este script una vez que el documento esté listo $ (documento) .ready (función () {
// Get all the thumbnail
$("menu li a").mouseenter(function(e) {
// Calculate the position of the image image
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// Set the z-index of the current item,
// make sure it"s greater than the rest of thumbnail items
// Set the position and display the image image
$(this).css("z-index","15")
.children("div.image")
.css({"top": y + 10,"left": x + 20,"display":"block"});
}).mousemove(function(e) {
// Calculate the position of the image image
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// This line causes the image will follow the mouse pointer
$(this).children("div.image").css({"top": y + 10,"left": x + 20});
}).mouseleave(function() {
// Reset the z-index and hide the image image
$(this).css("z-index","1")
.children("div.image")
.animate({"opacity": "hide"}, "fast");
});
});