Есть ли в CSS указатель-события: 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 для вашего запроса (свойство opacity используется только для иллюстрации необходимости переходов):

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