0

我有一个文本，它在悬停时在其他地方显示另一个（否则隐藏）文本，如下所示：

HTML

<div class="design">hover me<span>to show this</span></div>

CSS

.design {
    position: absolute;
    z-index: 2;
    color: #404040;
}

.design:hover {
    cursor: pointer;
}

.design span {
    position: absolute;
    display: none;
}

.design:hover span {
    display: block;
    top: 47px;
    left: 45px;
    font-family: Arial;
    font-size: 13px;
    color: #000;
}

如何将过渡效果应用于根据悬停隐藏或显示的文本？显然与andtransition冲突，但 using似乎也不起作用。display:none:blockvisibility

编辑：jsFiddle - http://jsfiddle.net/vwsgJ/

4

1 回答 1

2

第一种方法

根据（我认为）MDN（Mozilla Developer Network），我已经设法实现了你想要的opacity，你不能转换显示。我还稍微重新排列了你的 CSS：

http://codepen.io/hwg/pen/xFDIl - 工作代码。

CSS：

.design span {
position: absolute;
opacity:0;
transition: opacity 1s;

display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;

width:0;
height:0;
margin-left:-1000px;

}

.design:hover span {

opacity:1;
/*transition: all 1s;*/

width:30px;
height:auto;
margin-left:0;
}

请注意，codepen.io 使用无前缀，请参阅http://caniuse.com/css-transitions了解浏览器支持，可能必须添加前缀。

编辑-为了避免下面的 OP 问题，添加：width:0; height:0;到未悬停的元素和像素宽度/高度，例如width:30px; height:auto;悬停时。（参见示例）如果您将鼠标悬停在该区域上，您会看到悬停效果，但实际上这在我看来非常罕见，margin left如果需要，也可以通过使用来解决。

注意：这会在鼠标移出时停止过渡。

新方法

为避免上述问题，pointer-events:none可以将属性添加到span. 这消除了对任何否定margins或自定义widths或的需要heights。

见http://codepen.io/hwg/pen/BojpK

但是，这在 IE-anything 中不受支持，请参阅 IE 的css 'pointer-events' 属性替代项以获得更多帮助。

否则，我认为无法完全满足 OP 的目标。

于 2013-06-22T12:28:28.590 回答