CSS使div在悬停时改变不透明度和亮度

Question

我的目标是创建一个区域，该区域显示可点击的文本内容，具有可更改整个区域的悬停，并且在滚动整个 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，直到翻转，当透明度设置为 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 并且看起来好像未被覆盖。但是，这不允许单击文本和链接元素。

使用 pointer-events:none 时，文本和链接是可点击的，但当光标位于 p 或 a 元素上时，它会导致悬停停用。如果光标四处移动，这会使整个 div 变亮并闪烁，如果光标悬停在链接上，则会快速闪烁!我不要这个!

我希望你们有更多的 css/html 知识可以帮助我(我知道的不多)。在此之前，我尝试在 .divhover:hover 上设置 z-index:-1 以使第一个 div 中的文本和链接可点击。我还尝试使用 position:absolute 将第二个 div 移出页面 (left:2000px)。这些都导致了相同的情况，因为它们只是使用 pointer-events 做同样事情的不同方式。

这是一个 jsfiddle，您可以在其中看到闪烁:

http://jsfiddle.net/6wU8X/

虽然这里不明显，但是如果你去掉pointer-events:none，链接和文字就不能点击了。

Answer 1

您看到的闪烁是由在 hover 属性上设置 pointer-events:none; 引起的。

您是在告诉浏览器忽略所有指针事件，即使是触发悬停状态的指针事件。因此，当您激活悬停 css 时，您会停用它，从而导致闪烁(它由鼠标像素移动更新)。

CSS:

.divhover:hover {
  background-color: hsla(0, 100%, 100%, 0.0); 
}

更新:如果您的最终目标只是简单地使文本变灰，直到您将鼠标悬停在它上面，那么您可以试试这个:

Working Demo

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

我认为您可能会以一种奇怪的方式处理这种效果。您可以在包含元素上添加悬停状态并切换不透明度。