CSS让一个div在悬停时改变不透明度，亮度

Posted 2023-03-06

【中文标题】CSS让一个div在悬停时改变不透明度，亮度

【英文标题】：CSS Making a div change opacity, lightness when hovered over

【发布时间】：2014-03-04 05:28:54

【问题描述】：

我的目标是创建一个显示可点击文本内容的区域，具有改变整个区域的悬停，并且在整个 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，链接和文字就不能点击了。

【参考方案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;

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

【讨论】：

是的，可以正常工作，但不允许单击文本和链接、p 和 a 元素。需要 pointer-events:none 才能允许点击经过“divhover”分类的 div。这是我遇到的问题 =[.

好的，我想我更了解这个问题，您希望文本 / bg 显示为灰色，直到用户将鼠标悬停在文本上？

是的，很抱歉不清楚。我希望它在悬停之前被模糊/变灰，然后隐藏起来。这是它如何突出的示例：jsfiddle.net/6wU8X。如果没有设置pointer-events:none，则无法点击/高亮div中的项目

啊！是的，看来我缺乏知识又一次导致了一个令人费解的问题。这就是我要找的。虽然我似乎犯了一个错误，但我很高兴知道这是一件容易的事！

实际上，这适用于我现在想要的，但它只会改变不透明度。如果 div 上的 div 有效，则可以为覆盖的 div 设置颜色。图像也可以与 div 事物一起使用，甚至可以与充满东西的 div 一起使用。

【参考方案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 解决方案！

【讨论】：

非常感谢。我仍然会喜欢 CSS 解决方案，因为我觉得这是可能的。然而，这；是一个我很欣赏的工作解决方案，并且可以用于我以后需要的东西。 =]