Loại bỏ Lớp có Lối ra Chuột

Question

Tôi đang thực hiện trên mouseenter/mouseleave với jQuery và nó dường như đang hoạt động nhưng không xuất hiện khi tôi thoát khỏi div. Điều này chỉ hoạt động khi tôi thoát khỏi cửa sổ thực tế.

Đây là jQuery tôi

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

Đây là HTML của tôi

<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> 

Tôi đã làm một fiddle js đây. Tôi đang học jquery, vì vậy lời khuyên được đánh giá cao.

http://jsfiddle.net/34h48148/

Answer 1

Chức năng của bạn hoạt động hoàn hảo! Vấn đề là lớp phủ. Bạn đặt tuyệt đối, làm cho nó bao gồm toàn bộ cơ thể. Vì vậy, thay đổi CSS của bạn một chút, đặt .pods và .col tương đối.

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

Updated Fiddle

Điều duy nhất tôi có thể thay đổi về chức năng của mình, được ràng buộc cả hai sự kiện trên cùng một người gọi:

$(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

Bạn cũng có thể sử dụng hover sự kiện như thế này:

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

Và đây là hover event doc

---

Tuy nhiên, vấn đề không phải là chức năng nhưng CSS liên quan đến lớp pod-overlay.
Thêm hai thuộc tính này trong css của bạn:

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

Answer 3

Bạn có thể sử dụng css tinh khiết

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

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

Answer 4

Sự kiện chuột thực tế bạn nên gọi là onmouseout

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

Answer 5

phương pháp của bạn là tốt nhưng bạn nó không hoạt động trên mouseleave là bởi vì lớp phủ là trên đầu trang của .col và ông nce mouseleave không bao giờ được kích hoạt. Bạn có thể sử dụng pointer-events cũng ngoài các câu trả lời khác đề xuất. Một cái gì đó như thế này

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

Dưới đây là bản demo cập nhật http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS: Tôi đã thay đổi biên giới của lớp phủ chỉ để hiển thị các ranh giới lớp phủ.

Answer 6

Actualy, mã đang làm việc, vấn đề là bạn đặt ngay cả trên lớp ".pods" bao gồm toàn bộ trang ... Vì vậy, thậm chí chỉ được kích hoạt khi bạn di chuột ra khỏi trang

Answer 7

học jquery, vì vậy lời khuyên được đánh giá cao.

jQuery không cần thiết để đạt được yêu cầu. Hãy thử sử dụng css giả lớp :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/