Есть ли в 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;
}
Источник

8 ответов

Решение

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

Источник

"Воровать" ответ Ксанко, но без этого уродливого, уродливого 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;
}
Источник

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

Источник

Просто чистый CSS, не нужно jquery:

div:hover {pointer-events: none}
div {pointer-events: auto}
Источник

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

Источник

В зависимости от положения мыши

Эта функция проверяет положение мыши и ограничивающую рамку элемента, а также проверяет, перекрываются ли они.

      function onHover(E,callback){
    window.addEventListener('mousemove',e=>{
        let R = E.getBoundingClientRect(); // get the element real dimentions 
        let x = e.pageX; // mouse x position 
        let y = e.pageY; // mouse y position 
        
        // check if mouse is within the the element box
        if(
            x > R.x && x < (R.x + R.width) 
         && y > R.y && y < (R.y + R.height)
        ){
            callback(true)
        }else{
            callback(false)
        }
    })
}

как использовать

      let E = document.querySelector('.layer'); // get the element that needs hover effect 
onHover(E,isHovering=>{
    if(isHovering){
        E.style.color='red';//red for example to indicate hover state 
    }else{
        E.style.color='black'; //black to indicate normal state 
    }
})
Источник
Другие вопросы по тегам