Question

我试图使用像这样的

创建一个纯css工具提示

<div class="divWithTooltip"> i haz tooltip 
    <span class="tooltip"> i am tooltip</span>
</div>

仅当悬停在.divWithTooltip上时，工具提示才会显示。

但我希望用户能够滚动工具提示。因此，我们的想法是让用户将光标从.divWithToolTip移动到工具提示，以保持工具提示可见。（总而言之，当.divWithTooltip被徘徊时，工具提示应该变为某种状态，并且它也会在自动悬停中显示）
我将不透明度转换为0.5秒，以便在divWithTooltip:hover之后保持工具提示显示一段时间，但除此之外我还没弄明白该做什么。

是否可以使用纯CSS解决此问题，还是需要Js？

到目前为止我的代码http://jsfiddle.net/oat19ncp/

我的代码也遇到了基本的css悬停问题。如果用户将鼠标悬停在工具提示上，则工具提示始终可见。我想它已经从它的父母那里继承了:hover规则。我该如何解决这个问题？

Answer 1

这需要JS。我看到的问题是，如果你将鼠标悬停在工具提示所在的位置，它就会显示......而你只希望工具提示在你将鼠标悬停在divWithtooltip上时显示。

http://jsfiddle.net/oat19ncp/18/

JS：

$('.divWithTooltip').hover(function() {
    $('.tooltip').stop(true).fadeIn();
}, function() {
    $('.tooltip').stop(true).fadeOut();
});

CSS：

.tooltip { 
    position:absolute ;
    bottom: -150px;
    left: 10px;
    z-index:99;    
    height: 50px; 
    overflow-y: scroll;
    padding: 10px;
    background-color: yellow;
    display: none;
}

.divWithTooltip {
    float:left;
    position:relative;
    border: solid 1px black;
    padding:5px; margin: 10px;
}

Answer 2

是的，只有CSS才有可能。您可以设置转换的延迟，并通过将其放在屏幕外来删除工具提示。

所以对于.tooltip集

left: -999em;
transition:opacity 0.5s linear 0.2s, left 0s linear 0.7s;

和:hover规则

left: 10px;
transition:opacity 0.5s linear 0s, left 0s linear 0s;

当其父项悬停时，这将立即将工具提示带入屏幕，但会延迟删除，直到淡出为止。（因为它在屏幕外不会触发悬停）

http://jsfiddle.net/gaby/oat19ncp/23/

演示

悬浮问题与纯css取代工具提示

2 个答案: