Помощ при програмиране, отговори на въпроси / Jquery / Показване на изображения с ефект върху съответното меню hover - jquery, html, css

Показване на изображения с ефект върху съответното меню hover - jquery, html, css

Как да покажа изображение с ефект, когато курсорът се движи над съответното меню това използвайки jquery или css?

Мога ли да го направя само чрез css, или трябва да използвам 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>

Отговори:

1 за отговор № 1

Не е необходимо да използвате JavaScript / jQuery, за да покажете изображение на мишката. Можете да използвате обикновен CSS:

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 */
}

Но ако искате да добавите ефект към появяването на изображението, ще трябва да използвате jQuery, както е написано в отговора на Tushars.

(Всъщност в CSS3 можете да използвате и анимации; примери тук, Но имайте предвид, че това може да доведе до проблеми при съвместна работа с браузъра и намаляване на съвместимостта.)

1 за отговор № 2

Използване на 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");
}

Променете background-image или background-position за :hover

0 за отговор № 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 за отговор № 4

// Заредете този скрипт, след като документът е готов $ (document) .ready (функция () {

    // 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");
});

});