带有隐藏元素的过渡

Question

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

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

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

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

Answer 1

第一种方法

我已经设法使用opacity 实现了您想要的，根据（我认为）MDN（Mozilla 开发人员网络）您无法转换显示。我还稍微重新排列了你的 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 不支持此功能，请参阅css 'pointer-events' property alternative for IE 以获得更多帮助。

否则我认为 OP 的目标无法完全实现。