Pomoc pri programovaní, odpovede na otázky / jQuery / Zobraziť obrázky s účinkom na príslušné umiestnenie kurzora myši - jquery, html, css

Zobraziť obrázky s účinkom na príslušné menu hover - jquery, html, css

Ako môžem zobraziť obrázok s efektom, keď sa kurzor nachádza nad príslušnými ponukami, ako je napr toto pomocou jQuery alebo CSS?

Môžem to urobiť iba pomocou css, alebo musím použiť 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>

odpovede:

1 pre odpoveď č. 1

Na zobrazenie obrázka pri umiestnení kurzora myši nemusíte používať JavaScript / jQuery. Môžete použiť obyčajný 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 */
}

Ale ak chcete pridať efekt na vzhľade obrázka, budete musieť použiť jQuery tak, ako je navrhnutý v odpovedi Tushars.

(V skutočnosti v CSS3 môžete tiež používať animácie; príklady. Uvedomte si však, že to môže spôsobiť problémy s kompatibilitou viacerých prehľadávačov a smerom dole.)

1 pre odpoveď č. 2

Použiť prechod 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");
}

Zmeniť background-image alebo background-position na :hover

0 pre odpoveď č. 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
});

.fadeIn ()

0 pre odpoveď č. 4

// Načítajte tento skript, akonáhle je dokument pripravený $ (document) .ready (function () {

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

});