Есть ли "указатель-события: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;
}
7 57
html css pointer-events

7 ответов:

Я не думаю, что это возможно для достижения ваших целей в 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

10

только наведите курсор. Это очень просто. Нет 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

54

"Кража" ответа Xanco, но без этого уродливого, уродливого jQuery.

HTML: (обратите внимание дивы в обратном порядке)

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

CSS:

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

Обновленный Скрипку

15

вы также можете обнаружить наведение на другой элемент и применить стили к его дочернему элементу или использовать другие селекторы css, такие как соседние дети и т. д.

Это зависит от вашего случая, хотя.

при наведении на родительский элемент. Я сделал это: 

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

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

чистое решение 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 значение может быть изменена в соответствии с вашими потребностями.

кредиты на переходы tweak:patad on ответ.

0

просто чисто css не нужно jquery:

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

Я использую :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>
0