CSSに `pointer-events:hoverOnly`または同様のものはありますか?


100

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

2
ただのメモですが、IEではサポートさpointer-eventsれていません。
Vucko

2
javascriptが必要なように聞こえる
ピート

ピートに同意します、これは特にcssを要求していることを知っていますが、同じ問題があり、私にとって最も簡単な解決策は、javascriptstackoverflow.com/ questions/35872534
Jerry Sha

回答:


12

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


106

ホバーのみ。これはとても簡単だ。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


23
これは「仕事」を行います-おそらく唯一の理由は、誰もが最初の場所でその行動が必要になりある-しかし、それは(少なくとも、その要素は、YouTubeの動画がない場合)、以下の要素にクリックスルー許可していません
Simon_Weaver

1
これは、さらなるポインタイベントを無効にするために要素をクリックする必要はありませんか?
Mindwin 2016

3
これは
美しい

2
@PriyanshuJainユーザーがボタンをクリックするとどうなると思いますか?
СвободенРоб

1
賢い💐(これで十分です)
Davious

24

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>


2
申し訳ありませんが、とにかく醜いjqueryを使用しています。しかし、CSSのみのソリューションに対する賛成票があります。
Jimmery 2014年

これは素晴らしいことです-残念ながら最下部のレイヤーにiframeが含まれている場合、残念ながら正しく機能しません:jsfiddle.net/ReZ9M/82
Simon_Weaver

1
これはどのようにして問題を解決しますか?OPは、最初に表示される要素を通過するためのクリックコマンドを要求しました。解決策ではありませんが、「トップレイヤー」テキストをハイライト表示できないことに注意してください...
Trever Thompson

6

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

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

親要素のホバー時。これは私がしました:

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

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

1

私が使用:hover私のオーバーレイDIV上にホバーをシミュレートするために、同じサイズの親/容器の擬似要素を、次にオーバーレイの設定pointer-eventsには、none以下の要素にクリックを通過します。


0

リクエストに対する純粋な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この答えを


このソリューションを試したとき、要素が「ホバー」状態でスタックするだけです。
Flimm

0

純粋なCSSjqueryは必要ありません:

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

こんにちは-これに対する多くの感謝-あなたの答えにデモを追加できますか(コードスニペットまたはcodepenまたはjsfiddleのこれへのリンクなど)-これにどんな種類の互換性があるか知っていますか?CSS3の新機能ですか?これがうまく
いけ

申し訳ありませんが、デモを作成できません。しかし、私のロジックでは、それは間違いなくすべてのブラウザーで動作します(IEがないので、IEについてはわかりません)。そして、それはcss1からサポートします:)
Bariq Dharmawan

caniuse.com/#feat=pointer-events-11を除くどのIEでも機能しません...ここで意味するものの動作するデモを作成すると、codepen.ioでテストし、機能する場合は、正解をあなたに授与します-申し訳ありませんが、これを理論上のコードに授与することはできません-機能するデモのみ
Jimmery

@brilloutにスニペットを追加できますか?Bczそれは私のための仕事です
Bariq Dharmawan
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.