Чи є в CSS `pointer-events: hoverOnly` або подібний?

Просто пограв із 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.

Фрагмент : Зверніть увагу, що 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Значення може бути змінено відповідно з вашими потребами.

Кредити переходів підправити: patad на цей відповідь .

Просто чистий css , не потребує jquery :

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