Ngăn sự kiện Di chuột của Div kích hoạt trên Div phụ huynh?

Question

Khi tôi di chuột qua .mensal DIV, nó sẽ kích hoạt di chuột qua phụ huynh .opera DIV, điều này có vẻ sai với tôi. Tôi chỉ muốn hiệu ứng "nổi bật" để làm việc trên trẻ em .opera DIV.

#operaContent { 
 
    padding: 0 50px 0 50px; 
 
    position: relative; 
 
    overflow: visible; 
 
} 
 
#operaContent .opera { 
 
    display: block; 
 
    border: 1px solid #FFFFFF; 
 
    border-bottom: 1px solid #DDDDDD; 
 
    padding: 5px; 
 
    margin-bottom: 10px; 
 
    height: 120px; 
 
    background-color: #0A8ECC; 
 
} 
 
#operaContent .opera:hover { 
 
    border: 1px solid #AAAAAA; 
 
    background-color: #DDDDDD; 
 
    cursor: pointer; 
 
} 
 
.mensal { 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 8px; 
 
    z-index: 3; 
 
    display: block; 
 
}

<div id="operaContent"> 
 
    <div class="opera"> 
 
    <div class="mensal"> 
 
     DIV 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Theo định nghĩa, lơ lửng trên một đứa trẻ, dao động so với cha mẹ là tốt. Không có "chặn" trong các sự kiện html.

Có hai chuỗi phương pháp, bong bóng và ảnh chụp.

Bất kỳ sự kiện nào diễn ra trong mô hình sự kiện W3C được ghi lại lần đầu tiên cho đến khi nó đạt đến phần tử đích và sau đó bật lên lại.

http://www.quirksmode.org/js/events_order.html

Cách duy nhất bạn sẽ ngăn chặn điều này là để ngăn chặn bong bóng bằng cách thêm javascript vào trang của bạn để ngăn chặn chuỗi. Điều này rất đơn giản trong jQuery

$('.mensal').hover(function(e){ 
    e.stopPropagation(); 

}); 

Điều này xảy ra với tôi rằng câu trả lời này hoàn toàn không hữu ích khi xử lý CSS. Các sự kiện Javascript không xử lý các bộ chọn CSS hoặc ngăn chúng.

Thật không may, với CSS một mình, tôi không biết một cách để thực hiện điều này (và thậm chí trong javascript nó có thể nhận được khôn lanh). CSS 4 selectors sẽ cho phép bạn để xác định chủ đề của bộ chọn http://dev.w3.org/csswg/selectors4/#subject để bạn có thể làm điều gì đó như

#operaContent .opera:hover! .mensal:not(:hover) { /*your css*/ } 

nhưng isnt này thực hiện nêu ra, và vẫn đang được phát triển cho dự thảo.

EDIT: Đây là một javascript (jQuery) thực hiện mà nên làm việc cho bạn

$(function(){ 
    $('.opera').hover(function() {$(this).addClass('hoverIntent')}, 
         function(){ $(this).removeClass('hoverIntent'); } 
        ); 

    $('.opera .mensal').hover(function() { 
     $(this).parent('.opera').removeClass('hoverIntent'); 
    }); 

})​ 

và CSS sửa đổi

#operaContent { 
    padding: 0 50px 0 50px; 
    position: relative; 
    overflow: visible; 
} 

#operaContent .opera { 
    display: block; 
    border: 1px solid #FFFFFF; 
    border-bottom: 1px solid #DDDDDD; 
    padding: 5px; 
    margin-bottom: 10px; 
    height: 120px; 
    background-color: #0A8ECC; 
} 


#operaContent .opera.hoverIntent { 
    border: 1px solid #AAAAAA; 
    background-color: #DDDDDD; 
    cursor: pointer; 
} 

.mensal { 
    position: absolute; 
    top: 1px; 
    left: 8px; 
    z-index: 3; 
    display: block; 
}​ 

và demo làm việc obligitory: http://jsfiddle.net/WB6Ty/