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

第一种方法

根据（我认为）MDN（Mozilla开发者网络）您无法转换显示，我已设法使用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;在悬停。（参见示例）如果您将鼠标悬停在精确区域，您会看到悬停效果，但实际上在我看来这种情况非常罕见，这也可以通过{{1如果需要的话。

注意：这会停止鼠标移出。

新方法

为避免上述问题，可以将属性margin left添加到pointer-events:none。这样就无需使用任何否定span或自定义margins或widths。

请参阅http://codepen.io/hwg/pen/BojpK

但是，IE-any不支持此功能，请参阅css 'pointer-events' property alternative for IE以获取更多帮助。

否则我不认为OP的目标可以完全。

过渡与隐藏的元素

1 个答案:

第一种方法

新方法