纯css移位工具提示的悬停问题答案

【问题标题】：Hover issues with pure css displaced tooltip纯css移位工具提示的悬停问题
【发布时间】：2014-10-30 22:14:28
【问题描述】：

我正在尝试使用像这样的 html 创建一个纯 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 规则。我该如何解决？

【问题讨论】：

我已经检查了你的 jsfiddle，它对我来说工作正常，完全符合你想要的工作方式。我可以将鼠标悬停在 divWithTooltip 上并显示工具提示。然后我可以将移动移动到工具提示上，它仍然在那里我可以滚动和阅读。也就是说，有一个问题。如果我滚动工具提示所在的位置而不滚动 divWithTooltip，工具提示仍会显示。我认为这确实需要一些 JS 工作才能实现。

标签： html css tooltip

【解决方案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;
}

【讨论】：

谢谢！问题是工具提示继承了它的父 .divWithTooltip 的：悬停。结论是悬停元素不能是工具提示的父级。所以我添加了一个内部 div 并制作了悬停元素来解决问题jsfiddle.net/qvobx06x

【解决方案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/的演示

【讨论】：