html - cssでホバーポインターイベントのみを停止する方法

Question

css を使用してホバー時に不透明度を変更するインタラクティブな背景があります。この上 (絶対配置) にはテキスト レイヤーがあります。上部のテキストでも背景が反応できるようにするために、テキストを含む div にcss pointer-event:noneを追加しました。

これはうまく機能しますが、テキストを強調表示する機能を維持できればさらに良いでしょう。

どのポインターイベントが抑制されるかを制限する方法を知っている人はいますか?

Answer 1

実際には、やりたいことはできません。pointer-event を無効にすると、テキストを選択できなくなります。しかし、jquery マジックによってこれを機能的に行うことができます。

まず、背景のホバー効果をいくつかのクラスに入れます。

.hov{background: black !important;} //just example

次に、ホバー効果に割り当てます。

$('#wrap').hover(function() {
    $('#wrap').toggleClass("hov");
});

ブロックからのホバーイベントをバックグラウンドに変換します。

$('#block').hover(function(e) {
    $('#wrap').trigger(e.type);
});

フィドルを調べればわかる

例