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

Ответ 1

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

Ответ 2

Наведите указатель мыши только. Это очень просто. Нет JS... Также запретите действие по умолчанию для ссылок.

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

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

Ответ 3

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

HTML: (Обратите внимание, что DIV находятся в обратном порядке)

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

Обновленный скрипт

Ответ 4

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

Это зависит от вашего дела.

В режиме родительского элемента. Я сделал это:

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

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

Ответ 5

Чистое решение 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 на этот ответ.