Hover Event
$(selector).hover(
function () { /* mouse enters */ },
function () { /* mouse leaves */ }
);Basic Hover
.hover() दो functions लेता है और उन्हें साथ में जोड़ता है -- पहला तब चलता है जब mouse element में enter करता है, दूसरा जब यह leave करता है। यह essentially mouseenter और mouseleave को अलग-अलग bind करने का shorthand है।
उदाहरण: Basic Hover
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover me</div>
<script>
$("#box").hover(function() {
console.log("Mouse entered");
}, function() {
console.log("Mouse left");
});
</script>
</body>
</html>Hover Styling
hover के enter/leave functions में एक style change pass करना, जैसे background-color बदलना, अलग CSS :hover rules लिखे बिना किसी element को visual feedback देने का एक तेज़ तरीका है।
उदाहरण: Hover Styling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover me</div>
<script>
$("#box").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "");
});
</script>
</body>
</html>Hover Messages
hover-in पर एक छोटा message या tooltip दिखाना और hover-out पर उसे clear करना lightweight, JavaScript-driven help text के लिए एक common pattern है।
उदाहरण: Hover Messages
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover me</div><p id="msg"></p>
<script>
$("#box").hover(function() {
$("#msg").text("You are hovering!");
}, function() {
$("#msg").text("");
});
</script>
</body>
</html>Hover और Classes
enter function में एक class जोड़ना और leave function में उसे हटाना styling logic को आपकी CSS में रखता है जबकि jQuery बस toggle करता है कि कौन-से rules लागू होते हैं, जो आमतौर पर inline style changes से साफ़ है।
उदाहरण: Hover and Classes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.highlighted { background: yellow; }
</style>
</head>
<body>
<div id="box">Hover me</div>
<script>
$("#box").hover(function() {
$(this).addClass("highlighted");
}, function() {
$(this).removeClass("highlighted");
});
</script>
</body>
</html>Images के साथ Hover
दोनों hover functions के बीच किसी image का src attribute बदलना (या उसका alt text update करना) button states जैसे simple image-based hover effects के लिए एक classic technique है।
उदाहरण: Hover with Images
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img id="pic" src="button-off.png" alt="Button">
<script>
$("#pic").hover(function() {
$(this).attr("src", "button-on.png");
}, function() {
$(this).attr("src", "button-off.png");
});
</script>
</body>
</html>.hover(fn)को सिर्फ एक function pass करना, इसलिए यह हर एक के लिए अलग handler चलाने के बजाय enter और leave दोनों पर चलता है।.hover()में.css()से style बदलना और leave function में इसे कभी reset न करना, element को उसकी hover style में stuck छोड़ते हुए।- touch devices के लिए
.hover()इस्तेमाल करना और उम्मीद करना कि यह काम करेगा, जबकि touchscreens पर कोई असली hover नहीं होता।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: