CSS'de bir "pointer-events: hoverOnly" veya benzeri var mı?

pointer-eventsCSS'de mülkle oynuyordum .

Bir var divben tüm fare olaylarına görünmez olmak istiyorum, için hariç :hover.

Bu nedenle, tüm tıklama komutları divaltındakine gider , ancak div, farenin üzerinde olup olmadığını bildirebilir.

Bunun yapılıp yapılamayacağını bana kimse söyleyebilir mi?

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

Hedeflerinize tek başına CSS'de ulaşmanın mümkün olduğunu sanmıyorum. Ancak, diğer katkıda bulunanların da belirttiği gibi, JQuery'de yapmak yeterince kolaydır. İşte bunu nasıl yaptım:

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 (değişmedi)

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

İşte JSFiddle: http://www.jsfiddle.net/ReZ9M

Yalnızca fareyle üzerine gelin. Bu çok kolay. JS yok ... Bağlantı varsayılan eylemini de engelleyin.

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

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

Düzenleme: IE 11 ve üzerinde http://caniuse.com/#search=pointer-events desteklenir

Xanco'nun cevabını "çalmak" ama o çirkin, çirkin jQuery olmadan.

Snippet : DIV'lerin ters sırada olduğuna dikkat edin

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

Ayrıca farklı öğedeki fareyle üzerine gelmeyi algılayabilir ve alt öğeye stiller uygulayabilir veya bitişik alt öğeler gibi diğer css seçicilerini kullanabilirsiniz.

Yine de durumunuza bağlı.

Üst öğede üzerine gelin. Bunu ben yaptım:

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

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

Kullandığım :hoverzaman paylaşımı div üzerinde vurgulu taklit etmek için bir eşit büyüklükte üst / kabın sözde eleman, o zaman paylaşımı en ayarlamak pointer-eventsiçin noneaşağıdaki elemanlara tıklama geçmesine.

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>

Talebinize saf CSS çözümü (opaklık özelliği sadece geçiş ihtiyacını göstermek için mevcuttur):

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

Bu ne yapar:

Fare kutuya girdiğinde, :hover durumu . Ancak bu durumda işaretçi olayları devre dışı bırakılır.

Ancak geçiş zamanlayıcılarını ayarlamazsanız, div fare hareket ettiğinde üzerine gelme durumunu iptal edecektir; fareyle öğenin içinde hareket ederken üzerine gelme durumu titreyecektir. Bunu opaklık özellikleriyle yukarıdaki kodu kullanarak anlayabilirsiniz.

Fareyle üzerine gelme durumundan geçiş için bir gecikme ayarlamak sorunu düzeltir. 2sDeğeri ihtiyaçlarınıza göre tweaked olabilir.

Geçişlere verilen krediler ayarlandı : bu cevapta patad .

Sadece saf css , jquery'ye ihtiyaç duymaz :

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