CSS使div改变不透明度，悬停在上方时的亮度

我的目标是创建一个显示可单击文本内容的区域，具有改变整个区域的悬停，并且在滚动整个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>

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

如果没有

指针事件：无

，这与正常的悬停功能类似：如果鼠标不在div区域，则会有一个透明度为0.5的白色层。如果鼠标在其上，则透明度为0.0，并且看起来好像未覆盖。但是，这不允许单击文本和链接元素

对于

指针事件：无

，文本和链接是可单击的，但当光标位于p或a元素上时，会导致悬停停用。这会使整个div在光标移动时闪烁，在光标悬停在链接上时快速闪烁！我不要这个

我希望所有拥有更多css/html知识的人都能帮助我（我知道的不多）。在此之前，我尝试在

上设置
z-index:-1
。我还尝试使用
position:absolute
将第二个div移出页面（
left:2000px
）。这两种方法导致了相同的情况，因为它们只是对
指针事件执行相同操作的不同方法

下面是一个JSFIDLE，您可以在其中看到闪烁：


虽然此处不明显，但如果取出
指针事件：无
，链接和文本将无法单击。
您看到的闪烁是由设置
指针事件：无

您告诉浏览器忽略所有指针事件，甚至是触发悬停状态的事件。因此，当你激活悬停css的时候，你就去激活它，导致闪烁（它是通过鼠标像素的移动来更新的）

CSS:

更新：如果您的最终目标是将文本灰显，直到您将鼠标悬停在文本上方，那么您可以尝试以下方法：


HTML:

我想你可能会用一种奇怪的方式来处理这种效应。可以在包含元素上添加悬停状态并切换不透明度
 我想不出一个用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>

请在此处查看它的实际操作：

希望有人能想出一个CSS解决方案
 是的，这是正确的，但是它不允许点击文本和链接，p和a元素。指针事件：无需允许单击通过“divhover”分类div。这就是我遇到的问题=[.好的，我想我更了解这个问题，您希望文本/bg在用户悬停在文本上之前变灰吗？是的，很抱歉不清楚。我希望文本/bg在悬停之前变灰，然后隐藏自己。下面是它如何变灰的示例：。如果未设置指针事件：none，则无法单击div中的项目/higlightedAh！是的，似乎我缺乏知识又一次导致了一个复杂的问题。这就是我要寻找的。虽然这令人震惊，但我似乎犯了一个错误，我很高兴知道这是一件如此简单的事情！实际上，这符合我现在想要的，但它只会改变不透明度。如果div-on-div的事情起作用，颜色可以设置为叠加的div。图像也可以与div一起使用，甚至可以与填充内容的div一起使用。非常感谢。我仍然喜欢css解决方案，因为我觉得这是可能的。然而，这是一个我欣赏的工作解决方案，可能会用于我以后需要的东西。=]
.divhover:hover {
  background-color: hsla(0, 100%, 100%, 0.0); 
}

<div class="hover">    
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

.hover {
    width:500px; 
    height:500px;
    background-color:#ccc; 
    color:#333;
    opacity: .5;
}

.hover:hover{
    opacity: 1;
}

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

 $(document).ready(function(){

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

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

});