क्या सीएसएस में एक 'पॉइंटर-ईवेंट: hoverOnly' या समान है?

Question 1

बस pointer-eventsसीएसएस में संपत्ति के साथ खेल रहा है ।

मेरे पास एक है divकि मैं सभी माउस घटनाओं के लिए अदृश्य होना चाहता हूं, सिवाय इसके :hover।

तो सभी क्लिक कमांड इसके divनीचे वाले हिस्से से गुजरते हैं , लेकिन div रिपोर्ट कर सकता है कि माउस इसके ऊपर है या नहीं।

क्या कोई मुझे बता सकता है कि क्या यह किया जा सकता है?

HTML:

<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>

सीएसएस:

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

Question 2

मुझे नहीं लगता कि अकेले सीएसएस में अपने उद्देश्यों को प्राप्त करना संभव है। हालांकि, जैसा कि अन्य योगदानकर्ताओं ने उल्लेख किया है, यह JQuery में करना काफी आसान है। यहाँ मैंने यह कैसे किया है:

एचटीएमएल

<div
  id="toplayer"
  class="layer"
  style="
    z-index: 20;
    pointer-events: none;
    background-color: white;
    display: none;
  "
>
  Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>

सीएसएस (अपरिवर्तित)

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

JQuery

$(document).ready(function(){
    $("#bottomlayer").hover(
        function() {
            $("#toplayer").css("display", "block");
        },
        function() {
            $("#toplayer").css("display", "none");
        }
    );
});

यहाँ JSFiddle: http://www.jsfiddle.net/ReZ9M है

Question 3

केवल होवर करें। यह बहुत आसान है। नहीं JS ... लिंक डिफ़ॉल्ट कार्रवाई को भी रोकें।

a:hover {
	color: red;
}
a:active {
	pointer-events: none;
}

<a href="www.google.com">Link here</a>

स्निपेट का विस्तार करें

संपादित करें: IE 11 और http://caniuse.com/#search=pointer-events के ऊपर समर्थित है

Question 4

"चोरी" Xanco का जवाब लेकिन उस बदसूरत, बदसूरत jQuery के बिना।

स्निपेट : नोटिस DIVs रिवर्स ऑर्डर में हैं

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 400px;
}

#bottomlayer {
  z-index: 10
}

#toplayer {
  z-index: 20;
  pointer-events: none;
  background-color: white;
  display: none
}

#bottomlayer:hover~#toplayer {
  display: block
}

<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>

स्निपेट का विस्तार करें

Question 5

आप विभिन्न तत्व पर होवर का पता लगा सकते हैं और अपने बच्चे के लिए शैलियों को लागू कर सकते हैं, या आसन्न बच्चों जैसे अन्य सीएसएस चयनकर्ताओं का उपयोग कर सकते हैं।

हालांकि यह आपके मामले पर निर्भर करता है।

मूल तत्व होवर पर। इसे मैने किया है:

.child {
    pointer-events: none;
    background-color: white;
}

.parent:hover > .child {
    background-color: black;
}

Question 6

मैं :hoverअपने ओवरले डिव के ऊपर एक हॉवर का अनुकरण करने के लिए एक समान आकार के माता-पिता / कंटेनर के छद्म तत्व का उपयोग करता हूं, फिर ओवरले pointer-eventsको noneक्लिक करके नीचे के तत्वों तक पहुंचाता हूं ।

कोड स्निपेट दिखाएं

let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');

let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: green;
  width: 300px;
  height: 300px;
}

#overlay {
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* Pass through clicks */
  pointer-events: none;
}


/* 
   Set overlay hover style based on
   :hover pseudo-element of its  
   container
*/
#container:hover #overlay {
  opacity: 0.5;
}

#woohoo-button {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container">
  <div id="overlay"></div>
  <button id="woohoo-button">
    Click Me
  </button>
</div>

स्निपेट का विस्तार करें

Question 7

आपके अनुरोध का शुद्ध सीएसएस समाधान (अपारदर्शिता संपत्ति केवल संक्रमणों की आवश्यकता को दर्शाने के लिए है):

.hoverOnly:hover {
    pointer-events: none;
    opacity: 0.1;
    transition-delay: 0s;
}
.hoverOnly {
    transition: ,5s all;
    opacity: 0.75;
    transition-delay: 2s;
}

यह क्या करता है:

जब माउस बॉक्स में प्रवेश करता है, तो यह :hoverराज्य को चालू करता है। हालाँकि, उस स्थिति में, पॉइंटर-ईवेंट अक्षम हैं।

लेकिन अगर आप बदलाव टाइमर सेट नहीं करते हैं, तो माउस हिलने पर div हॉवर स्थिति को रद्द कर देगा; होवर स्टेट झिलमिलाहट करेगा जबकि माउस तत्व के अंदर बढ़ रहा है। आप अपारदर्शिता गुणों के साथ ऊपर दिए गए कोड का उपयोग करके इसे महसूस कर सकते हैं।

होवर अवस्था से बाहर संक्रमण के लिए देरी सेट करना इसे ठीक करता है। 2sमूल्य आपकी आवश्यकताओं के अनुरूप बदलाव किया जा सकता है।

लेन-देन का श्रेय ट्वीक: इस उत्तर पर पटाड ।

Question 8

बस शुद्ध सीएसएस , jquery की जरूरत नहीं है :

div:hover {pointer-events: none}
div {pointer-events: auto}