มี "pointer-events: hoverOnly" หรือคล้ายกันใน CSS หรือไม่

เพิ่งเล่นกับpointer-eventsคุณสมบัติใน CSS

ฉันมีที่ฉันต้องการที่จะมองไม่เห็นเหตุการณ์ของเมาส์ทั้งหมดยกเว้น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>

CSS:

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

ฉันไม่คิดว่าจะบรรลุเป้าหมายใน CSS เพียงอย่างเดียว อย่างไรก็ตามตามที่ผู้ร่วมให้ข้อมูลรายอื่นได้กล่าวไว้มันง่ายพอที่จะทำใน JQuery นี่คือวิธีที่ฉันได้ทำ:

HTML

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

CSS (ไม่เปลี่ยนแปลง)

.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

วางเมาส์เหนือเท่านั้น มันง่ายมาก ๆ. ไม่มี 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

"ขโมย" คำตอบของ Xanco แต่ไม่มี jQuery ที่น่าเกลียดน่าเกลียด

Snippet : สังเกตว่า DIV อยู่ในลำดับย้อนกลับ

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

นอกจากนี้คุณยังสามารถตรวจจับการวางเมาส์บนองค์ประกอบที่แตกต่างกันและใช้สไตล์กับลูกของมันหรือใช้ตัวเลือก css อื่น ๆ เช่นลูกที่อยู่ติดกันเป็นต้น

ขึ้นอยู่กับกรณีของคุณ

เมื่อวางเมาส์เหนือองค์ประกอบหลัก ฉันทำอย่างนี้:

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

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

ผมใช้:hoverหลอกองค์ประกอบของเท่ากับขนาดแม่ / ภาชนะเพื่อจำลองการวางเมาส์เหนือ div ซ้อนทับของฉันแล้วตั้งซ้อนทับของ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>

โซลูชัน CSS บริสุทธิ์สำหรับคำขอของคุณ (คุณสมบัติความทึบมีไว้เพื่อแสดงให้เห็นถึงความจำเป็นในการเปลี่ยน):

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

มันทำอะไร:

เมื่อเมาส์เข้าสู่ช่องจะเรียกใช้ไฟล์ :hoverสถานะ อย่างไรก็ตามในสถานะนั้นตัวชี้เหตุการณ์จะถูกปิดใช้งาน

แต่ถ้าคุณไม่ได้ตั้งค่าตัวจับเวลาการเปลี่ยน Div จะยกเลิกสถานะโฮเวอร์เมื่อเมาส์เคลื่อนที่ สถานะโฮเวอร์จะกะพริบในขณะที่เมาส์เคลื่อนที่ภายในองค์ประกอบ คุณสามารถรับรู้สิ่งนี้ได้โดยใช้โค้ดด้านบนพร้อมคุณสมบัติความทึบ

การตั้งค่าความล่าช้าในการเปลี่ยนจากสถานะโฮเวอร์จะช่วยแก้ไขได้ 2sค่าสามารถ tweaked เพื่อให้เหมาะกับความต้องการของคุณ

เครดิตในการเปลี่ยนการปรับแต่ง: patadสำหรับคำตอบนี้

เพียงแค่cssบริสุทธิ์ไม่จำเป็นต้องใช้jquery :

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