web-dev-qa-db-ja.com

CSSに `pointer-events：hoverOnly`などがありますか？

CSSのpointer-eventsプロパティで遊んでいます。

:hoverを除くすべてのマウスイベントから見えないようにするdivがあります。

したがって、すべてのクリックコマンドは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;
}
htmlcsspointer-events
71
Jimmery

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

11
Xanco

ホバーのみ。それは非常に簡単です。 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 でサポートされています

76
Свободен Роб

Xancoの答えを「盗む」が、そのbutい、い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>
20
Niet the Dark Absol

また、異なる要素でホバーを検出し、その子にスタイルを適用したり、隣接する子などの他のCSSセレクターを使用したりすることもできます。

それはあなたのケースにもよりますが。

親要素にカーソルを合わせます。これは私がしました：

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

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

純粋なcss、必要ありませんjquery：

div:hover {pointer-events: none}
div {pointer-events: auto}
1
Bariq Dharmawan

リクエストに対する純粋な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 this answer 。

0
Mindwin

同じサイズの親/コンテナの: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
Jeremy Sabath