पैर div पर ट्रिगर करने वाले एक div की होवर घटना को रोकना?

Question

जब मैं .mensal DIV माउसओवर करता हूं तो यह माउसओवर माता-पिता को .opera DIV को ट्रिगर करेगा, जो मुझे गलत लगता है। मैं बस बच्चे को .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

परिभाषा के अनुसार, एक बच्चे पर मँडरा, साथ ही माता-पिता पर घूमता। एचटीएमएल कार्यक्रमों में कोई "अवरुद्ध" नहीं है।

दो विधि श्रृंखलाएं, बबल और कैप्चर हैं।

किसी भी घटना W3C घटना मॉडल में हो रहे पहले जब तक यह लक्ष्य तत्व तक पहुँच जाता है और उसके बाद फिर से बुलबुले कब्जा कर लिया है।

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

एक ही तरीका है कि आप इसे रोकने के लिए जा रहे हैं श्रृंखला को रोकने के लिए अपने पृष्ठ के लिए जावास्क्रिप्ट जोड़कर उत्साह से भरा हुआ रोकने के लिए है। यह jQuery

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

}); 

यह मेरे लिए होता है कि यह उत्तर सीएसएस से निपटने के दौरान पूरी तरह से अनुपयोगी है। जावास्क्रिप्ट घटनाएं सीएसएस चयनकर्ताओं से निपटने या उन्हें रोकने से संबंधित नहीं हैं।

दुर्भाग्य से, अकेले सीएसएस के साथ, मुझे यह पूरा करने के तरीके के बारे में पता नहीं है (और जावास्क्रिप्ट में भी यह मुश्किल हो सकता है)। सीएसएस 4 चयनकर्ताओं आप चयनकर्ता http://dev.w3.org/csswg/selectors4/#subject का विषय निर्दिष्ट करने के लिए, ताकि आप

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

की तरह कुछ कर सकते हैं, लेकिन यह नहीं है अभी तक लागू की अनुमति देगा, और मसौदा के लिए विकास के तहत अब भी है।

संपादित करें: यहाँ एक जावास्क्रिप्ट (jQuery) कार्यान्वयन है कि आप

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

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

})​ 

और संशोधित सीएसएस

#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; 
}​ 

और obligitory काम कर डेमो के लिए काम करना चाहिए है: http://jsfiddle.net/WB6Ty/