JSFIDDLE http://jsfiddle.net/mda1Ld2o/8/

Question

您可以看到当您将鼠标悬停在文本周围时，您会看到悬停效果，但是当您将鼠标悬停在文本上时会丢失该效果。

HTML

<body>
<div id="work1"></div>
<p style="position: absolute; top: 2px;">Brand new logo!</p>
</body>

CSS

#work1 {
    width: 308px;
    height: 86px;
    opacity: 0;
    background-color: #272727;
    -moz-transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
}

#work1:hover {
    opacity: 1;
}

并演示：http://jsfiddle.net/mda1Ld2o/

Answer 1

Fiddle

您的<p>超出<div>

<div id="work1">
    <p>Brand new logo!</p>
</div>

但并非所有这些都需要修复。您试图为bg颜色设置动画，而不是不透明度。请尝试使用此css：

#work1 {
    width: 308px;
    height: 86px;
    background-color: transparent;
    -moz-transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
}

#work1:hover {
    background-color: #272727;
}

Answer 2

一种方法是在绝对定位元素上使用pointer-events: none;，段落如下：

<强> EXAMPLE HERE

p {
    pointer-events: none;
}

根据 MDN ：

CSS属性pointer-events允许作者控制什么   情况（如果有的话）特定的图形元素可以成为   鼠标事件的目标。

<强>无
  该元素永远不是鼠标事件的目标;但是，老鼠   如果这些后代有事件，事件可能会针对其后代元素   指针事件设置为其他值。在这种情况下，鼠标   事件将触发此父元素上的事件侦听器   适合在活动期间往返于后代的路上   捕获/泡沫阶段

pointer-event是documented in SVG specification，但它可以用于HTML / XML内容。

Answer 3

你有

<p>

以外的

<div>

<div id="work1">
  <p style="position: absolute; top: 2px;">Brand new logo!</p>
</div>

我在悬停时发出了color:white。所以你可以阅读......

#work1:hover {
  background-color: #272727;
  color:white;
}

JSFIDDLE http://jsfiddle.net/mda1Ld2o/8/

Answer 4

您p标记需要位于div

内

这就是悬停关闭的原因

至于不透明度。我使用此site将您的十六进制颜色转换为rgb，结果为27,27,27

所以将你的css改为：

#work1 {
    width: 308px;
    height: 86px;
    background-color: rgba(27,27,27,0);
    -moz-transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
}

#work1:hover {
    background-color: rgba(27,27,27,1);
}

HTML：

<body>
<div id="work1">
  <p style="position: absolute; top: 2px;">Brand new logo!</p>
</div>

</body>

Answer 5

是的，因为您的p标记位于div#work1之外。把你的段落放入div。

<div id="work1">
    <p style="position: absolute; top: 2px;">Brand new logo!</p>
</div>

您可能更改了文字的color。

color: #FFF;

当我将鼠标悬停在文本上时，我会失去悬停效果

5 个答案:

JSFIDDLE http://jsfiddle.net/mda1Ld2o/8/