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

您看到的闪烁是由在悬停属性上设置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;
}

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

Answer 2

我想不出用 CSS 来做到这一点的方法。如果您对 JavaScript 和 jQuery 持开放态度，那么如果没有人提出 CSS 解决方案，这里是一个退路。

给父div添加一个类：

<div class="parent" style="width:500px; height:500px; background-color:#ccc; color:#333;z-index:10">

<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>

    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

包含jquery 并添加以下脚本：

 $(document).ready(function(){

    $(".divhover").mouseover(function(){
        console.log("Over");
        $(this).hide();
        }
    );

    $(".parent").mouseleave(function(){
        console.log("out");
       $(".divhover").show(); 
    });

});

在此处查看实际操作：http://jsfiddle.net/6wU8X/2/

希望有人提出 CSS 解决方案！