我的目标是创建一个显示可单击文本内容的区域，将鼠标悬停在整个区域上，并在整个div或文本滚动时不显示内容。我想用CSS做到这一点。
例如，我想要一个div，例如500 x 500 px，在该div内需要单击p和a。它正常工作。就像是：
<div style="width:500px; height:500px;">
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
然后，我要在顶部有一个div，该div具有覆盖整个第一个div的翻转（悬停）功能，用透明颜色将整个div雾化，直到将透明度设置为0.0并翻转为止，然后消失。但是我希望来自第一个div的链接是可单击的（为此，我给第二个div pointer-events:none）。我将此代码*放置在第一个div中，因此总的来说像这样：
<div style="width:500px; height:500px;">
*<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
CSS类样式：
div.divhover {
background-color: hsla(0, 100%, 100%, 0.5); }
div.divhover:hover {
background-color: hsla(0, 100%, 100%, 0.0);
pointer-events: none; }
不带pointer-events:none，它的工作原理类似于普通的悬停功能：如果您的鼠标不在div区域上，则会有一个透明度为0.5的白色图层。如果您的鼠标位于其上，则透明度为0.0，并且看起来好像未被覆盖。但是，这不允许单击text和links元素。
使用pointer-events:none，可以单击文本和链接，但是当光标在p或元素上时，悬停将停用。如果光标四处移动，整个div会闪烁并闪烁；如果光标悬停在链接上，则会快速闪烁！我不要这个！
我希望所有具有更多CSS / HTML知识的人都能对我有所帮助（我不太了解）。得到这个地步之前，我已尝试设置z-index:-1上.divhover:hover有第一个div的文本和链接点击。我还尝试过position:absolute将第二个div从页面（left:2000px）中移出。两者都导致了相同的情况，因为它们只是使用来做同一件事的不同方式pointer-events。
这是一个jsfiddle，您可以在其中看到闪烁：
尽管在此处不明显，但是如果您将删除pointer-events:none，则链接和文本将不可单击。
您看到的闪烁是由pointer-events:none;悬停属性上的设置引起的。
您要告诉浏览器忽略所有指针事件，甚至包括那些触发悬停状态的事件。因此，一旦激活悬浮css，就将其禁用，从而导致闪烁（通过鼠标像素移动来更新）。
CSS：
.divhover:hover {
background-color: hsla(0, 100%, 100%, 0.0);
}
更新：如果您的最终目标是仅将文本显示为灰色，直到将鼠标悬停在其上方，则可以尝试以下操作：
HTML：
<div class="hover">
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
CSS：
.hover {
width:500px;
height:500px;
background-color:#ccc;
color:#333;
opacity: .5;
}
.hover:hover{
opacity: 1;
}
我认为您可能会以一种奇怪的方式来实现这种效果。您可以在包含元素上添加悬停状态并切换不透明度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句