जब कर्सर संबंधित मेनू पर मँडरा रहा हो, तो मैं एक प्रभाव के साथ एक छवि कैसे दिखा सकता हूं इस jquery या 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माउस होवर पर चित्र दिखाने के लिए आपको जावास्क्रिप्ट / jQuery का उपयोग नहीं करना है। आप सादे सीएसएस का उपयोग कर सकते हैं:
एचटीएमएल
<ul id="menu">
<li></li>
...
</ul>
सीएसएस
#menu li:hover {
background-image: url("path/to/my/image.png");
background-position: 10px 10px /* set x and y coordinates */
}
लेकिन अगर आप छवि के दिखाई देने के लिए एक प्रभाव जोड़ना चाहते हैं, तो आपको jQuery का उपयोग करना होगा जैसा कि तुषार के उत्तर में तैयार किया गया है।
(वास्तव में, CSS3 में आप एनिमेशन का भी उपयोग कर सकते हैं; यहां उदाहरण। लेकिन ध्यान रखें कि यह क्रॉस ब्राउज़र और डाउनवर्ड संगतता समस्याओं का कारण बन सकता है।)
उत्तर № 2 के लिए 1
सीएसएस संक्रमण का उपयोग करें:
#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
// दस्तावेज़ तैयार होने के बाद इस स्क्रिप्ट को लोड करें $ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({
// 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");
});
});