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或元素上时，它会导致悬停停用。如果光标移动，这会使整个div spaz out和blink，如果光标悬停在链接上，则快速闪烁！我不想要这个！

我希望所有拥有更多css / html技术诀窍的人都可以帮助我（我不太了解）。在此之前，我尝试在z-index:-1上设置.divhover:hover，以便第一个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解决方案！

CSS使div变得不透明，轻盈时盘旋

2 个答案: