Css 带有隐藏元素的转换

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

HTML

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

如何将过渡效果应用于根据悬停而隐藏或显示的文本？显然，

转换

与

显示：无

和

：块

冲突，但使用

可见性

似乎也不起作用

编辑：jsFiddle-

第一个方法 根据（我认为）MDN（Mozilla开发者网络）的说法，我已经成功地使用了

不透明性
，实现了您想要的效果，您无法转换显示。我还稍微重新排列了您的css：

-工作代码

CSS:

}

请注意，codepen.io使用无前缀，有关浏览器支持，请参阅，可能需要添加前缀

编辑-为避免OP出现以下问题，请添加：
宽度：0；身高：0到未悬停的元素，以及像素宽度/高度，例如
宽度：30px；高度：自动悬停。（参见示例）如果您将鼠标悬停在准确的区域上，您会看到悬停效果，但在实践中，在我看来这是非常罕见的，如果需要，也可以使用
左边距

注意：这将在鼠标离开时停止转换

新方法
为了避免上述问题，可以将属性
指针事件：none
添加到
span
。这样就不需要任何负的
边距
，或自定义的
宽度
或
高度

看

但是，IE中不支持这一点，请参阅以获取更多帮助

否则，我认为OP的目标不可能完全实现。
这个问题与。。希望这将帮助您…并且您可以为您的问题创建一个JSFIDLE。这将帮助其他人给你一个更好的答案：）JSFIDLE补充道，谢谢。但是，我无法从您链接的其他主题中找到帮助。希望这也能有所帮助。我使用rgba-->使用
opacity=0
和
1
，
transition
仅对数值有效！谢谢，这几乎解决了问题，但正如您所见，悬停隐藏的“显示此”文本（如果/当您知道其位置时）也会使其显示。这也是为什么我首先选择了
display
。有没有办法解决这个问题？@lapingultah使用
宽度
进行了修复-请参阅answer@lapingultah另外，
height
。似乎不起作用，可使用CodePen和JSFIDLE重复。这不应该是一个浏览器问题（FF 21.0）。实际上，这样做更奇怪。足够悬停在文本区域内的任何位置。
.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;
}

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