4

我的目标是创建一个显示可点击文本内容的区域，具有改变整个区域的悬停，并且在整个 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 知识的人都能帮助我（我不太了解）。在此之前，我尝试设置让z-index:-1第.divhover:hover一个 div 中的文本和链接可点击。我还尝试使用position:absolute将第二个 div 移出页面 ( left:2000px)。这些都导致了相同的情况，因为它们只是用不同的方式来做同样的事情pointer-events。

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

http://jsfiddle.net/6wU8X/

虽然这里不明显，但如果你拿出pointer-events:none，链接和文本将无法点击。

4

2 回答 2

3

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

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

CSS：

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

更新：如果您的最终目标是简单地将文本变灰，直到您将鼠标悬停在它上面，那么您可以尝试以下操作：

工作演示

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

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

于 2014-02-07T01:13:36.793 回答
1

我想不出用 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 解决方案！

于 2014-02-07T05:31:29.857 回答