माउस से बाहर निकलने वाले क्लास को हटाकर

Question

मैं jQuery के साथ माउसेंटर/माउसलेव पर प्रदर्शन कर रहा हूं और ऐसा लगता है कि मैं div से बाहर निकलने पर काम नहीं कर रहा हूं। यह केवल तभी काम कर रहा है जब मैं वास्तविक विंडो से बाहर निकलता हूं।

यह मेरा jQuery

$(document).ready(function() { 
    $(".pods .col").on("mouseenter", function() { 
    $(this).find(".pod-overlay").addClass("show") 
    }); 
    $(".pods .col").on("mouseleave", function() { 
    $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

यह मेरा एचटीएमएल

<div id="splash" class="section section-splash bg"> 
    <div class="pods"> 
    <div class="col col-4"> 
     <div id="pod-splash-food" class="pod pod-food"> 
     <div class="pod-overlay"></div> 
     </div> 
    </div> 
    </div> 
</div> 

मैं एक js बेला यहाँ किया है है। मैं jquery सीख रहा हूँ, तो सलाह की सराहना की है।

http://jsfiddle.net/34h48148/

Answer 1

आपका कार्य सही काम करता है! समस्या ओवरले है। आप इसे पूर्ण शरीर को कवर करते हुए पूर्ण करते हैं। तो, अपने सीएसएस को थोड़ा सा बदलें, .pods और .col संबंधित रखें।

.pods,.col { overflow: auto; position: relative; } 

Updated Fiddle

केवल एक चीज मैं अपने कार्य पर बदल जाएगा, एक ही फोन करने वाले पर दोनों घटनाओं बाध्यकारी है:

$(document).ready(function() { 
    $(".pods .col").on("mouseenter", function() { 
     $(this).find(".pod-overlay").addClass("show") 
    }).on("mouseleave", function() { 
     $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

Answer 2

आप भी इस तरह hover घटना का उपयोग कर सकते हैं:

$(document).ready(function() { 
    $(".pods .col").hover(function() { 
    $(this).find(".pod-overlay").addClass("show") 
    }, function() { 
    $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

और यह hover event doc

---

हालांकि है, समस्या समारोह लेकिन करने के लिए जुड़े सीएसएस नहीं है pod-overlay कक्षा।
अपने सीएसएस में इन दो विशेषताएं जोड़ें:

.pod-overlay { 
    width:260px; 
    height:260px; 
    ... 
} 

Answer 3

आप शुद्ध सीएसएस इस्तेमाल कर सकते हैं

.pods .col:hover .pod-overlay{ 
    visibility: visible; 
} 

.pods .col .pod-overlay{ 
    visibility: hidden; 
} 

Answer 4

वास्तविक माउस घटना आपको बुला जाना चाहिए onmouseout

$(".pods .col").on("mouseout", function() { 
    $(this).find(".pod-overlay").removeClass("show") 
}); 

Answer 5

आपका तरीका है ठीक है लेकिन आप माउसलेव पर काम नहीं करते हैं क्योंकि ओवरले .col के शीर्ष पर है और वह nce mouseleave कभी ट्रिगर नहीं किया जाता है। आप अन्य उत्तरों के सुझावों के अलावा pointer-events का उपयोग कर सकते हैं। इस

.pod-overlay { 
    pointer-events: none; 
    .... 
} 

की तरह कुछ यहाँ अद्यतन डेमो http://jsfiddle.net/dhirajbodicherla/34h48148/9/

पुनश्च है: मैं केवल ओवरले सीमाओं को दिखाने के लिए ओवरले की सीमा बदल दिया है।

Answer 6

वास्तव में, कोड काम कर रहा है, समस्या यह है कि आप ".pods" वर्ग पर भी सेट करें जो पूरे पृष्ठ को कवर करता है ... तो जब भी आप पेज

Answer 7

से बाहर निकलते हैं तो भी तभी ट्रिगर होता है

सीखने jquery, तो सलाह की सराहना की है।

jQuery आवश्यकता के लिए jQuery की आवश्यकता नहीं है। उपयोग का प्रयास करें css छद्म वर्ग :hover

.pod { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 
.pod-overlay { 
 
    display: none; 
 
    z-index: 2; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #fff; 
 
    background-color: rgba(255, 255, 255, .9) 
 
} 
 

 
.pods .col:hover .pod-overlay { 
 
    display:block; 
 
}

<div id="splash" class="section section-splash bg"> 
 
    <div class="pods"> 
 
     <div class="col col-4"> 
 
      <div id="pod-splash-food" class="pod pod-food"> 
 
       <div class="pod-overlay"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

jsfiddle http://jsfiddle.net/34h48148/11/