html - 纯 css 替换工具提示的悬停问题

Question

我正在尝试像这样使用 html 创建一个纯 css 工具提示

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

只有将鼠标悬停在 .divWithTooltip 上时，工具提示才会可见。

但我希望用户也能够滚动工具提示。所以想法是让用户将光标从 .divWithToolTip 移动到工具提示，以保持工具提示可见。(总而言之，当 .divWithTooltip 悬停时，工具提示应更改为在 self 悬停时也会显示的某种状态)
我将不透明度转换 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;
}