マウスオーバーで<div>を非表示にし、後ろのリンクをアクティブにすることを許可したい - html、css、hover

現在私はそれらの上にdivを持つリンクのセットを持っています。マウスオーバーでdivが消えて、後ろのリンクがクリック可能になるようにしたいと思います。

:hover {display: none}

覆っているdivには、ちらつき効果があります。ループを作成しているので、実行できません。

:hover {background-color: rgba(0,0,0,0);}

divはまだリンクをカバーしているので、また動作しません。私はそれを追加すると思った

:hover {pointer-events:none;}

動作する可能性がありますが、それはまたちらつきのループを作成します。

マウスを置いたときにdivが存在しないようにしたいのですが、存在しないようにすると：hoverコマンドが表示されずに戻ってきます（...そして点滅が始まります）

回答：

回答№1は1

これはうまくいくはずです：

:hover {
pointer-events: none;
visibility: hidden;
}

その理由は、 display: none その要素を物理的に削除します。つまり、その要素をホバーしなくなっています。このように、それはそれを元に戻します、そして今、あなたはそれを「ホバリング」しています。 visibility: hidden その一方で、要素を正確にそれが存在する場所に保持するので、あなたはまだ技術的にそれをホバリングしているでしょう。

---

私は嘘をついた、それはまったく機能しないだろう。

これが本当の解決策です：

HTML

<div class="container">
<a href="#">Hello</a>

<div class="overlay"></div>
</div>

CSS

.container {
width: 50px;
height: 50px;
position: relative;
}

.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: black;
}

.container:hover .overlay {
display: none;
}

フィドル： https://jsfiddle.net/zqsn2fym/

---