← Back to jQuery Course | Chapter 3: Events | Lesson 3 of 11

Hover Event क्या है

hover pattern तब code चलाता है जब pointer अंदर आता है और बाहर जाता है।

In this page:

  1. Basic Hover
  2. Hover Styling
  3. Hover Messages
  4. Hover और Classes
  5. Images के साथ Hover
Syntax
javascript 
$(selector).hover(
  function () { /* mouse enters */ },
  function () { /* mouse leaves */ }
);

Basic Hover

.hover() दो functions लेता है और उन्हें साथ में जोड़ता है -- पहला तब चलता है जब mouse element में enter करता है, दूसरा जब यह leave करता है। यह essentially mouseenter और mouseleave को अलग-अलग bind करने का shorthand है।

उदाहरण: Basic Hover

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box">Hover me</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#box").hover(function() {
        $("#output").append($("<div>").text("Mouse entered"));
      }, function() {
        $("#output").append($("<div>").text("Mouse left"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Hover Styling

hover के enter/leave functions में एक style change pass करना, जैसे background-color बदलना, अलग CSS :hover rules लिखे बिना किसी element को visual feedback देने का एक तेज़ तरीका है।

उदाहरण: Hover Styling

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box">Hover me</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#box").hover(function() {
        $(this).css("background-color", "yellow");
      }, function() {
        $(this).css("background-color", "");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Hover Messages

hover-in पर एक छोटा message या tooltip दिखाना और hover-out पर उसे clear करना lightweight, JavaScript-driven help text के लिए एक common pattern है।

उदाहरण: Hover Messages

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box">Hover me</div><p id="msg"></p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#box").hover(function() {
        $("#msg").text("You are hovering!");
      }, function() {
        $("#msg").text("");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Hover और Classes

enter function में एक class जोड़ना और leave function में उसे हटाना styling logic को आपकी CSS में रखता है जबकि jQuery बस toggle करता है कि कौन-से rules लागू होते हैं, जो आमतौर पर inline style changes से साफ़ है।

उदाहरण: Hover and Classes

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    .highlighted { background: yellow; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box">Hover me</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#box").hover(function() {
        $(this).addClass("highlighted");
      }, function() {
        $(this).removeClass("highlighted");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <img id="pic" src="button-off.png" alt="Button">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#pic").hover(function() {
        $(this).attr("src", "button-on.png");
      }, function() {
        $(this).attr("src", "button-off.png");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

jQuery Event Object क्या है · Event Propagation और Bubbling · on() से Event Binding · Document Ready इवेंट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. .hover(fn) को सिर्फ एक function pass करना, इसलिए यह हर एक के लिए अलग handler चलाने के बजाय enter और leave दोनों पर चलता है।
  2. .hover() में .css() से style बदलना और leave function में इसे कभी reset न करना, element को उसकी hover style में stuck छोड़ते हुए।
  3. touch devices के लिए .hover() इस्तेमाल करना और उम्मीद करना कि यह काम करेगा, जबकि touchscreens पर कोई असली hover नहीं होता।
🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson Mouse Events Next Lesson → Keyboard Events

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.