CSS에`pointer-events : hoverOnly` 또는 이와 유사한 것이 있습니까?

pointer-eventsCSS에서 속성을 가지고 놀았습니다 .

을 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

호버 만. 많이 쉽다. No 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내 오버레이 사업부를 통해 호버를 시뮬레이션하기 위해 동일한 크기의 부모 / 컨테이너의 의사 요소를 다음 오버레이의 설정 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}