javascript - 悬停显示当前时间

Question

我有一个函数可以在超时时隐藏/显示悬停时间。但现在我想让它显示一个用户悬停的时间。我知道它必须用 $(this) 完成，但我无法让它工作。

JsFiddle http://jsfiddle.net/z332ozjs/

<p class="div">
    <span class="time">[20:33:49]</span>
    Time 1
</p>
<p class="div">
    <span class="time">[21:35:49]</span>
    Time 2
</p>


var msgTime = $('.div');
var time = $('span.time');
time.hide();
var x;
msgTime.hover(
    function () {
        x = setTimeout( function() {  
            $(this).find(time).show();
        }, 100);
     }, 
     function () {
        clearInterval(x);
         $(this).find(time).hide();
     }
);

Answer 1

这是一个纯 CSS 解决方案:

.time {
  display: none;
}
.div:hover .time {
  display: inline;
}

<p class="div">
    <span class="time">[20:33:49]</span>
    Time 1
</p>
<p class="div">
    <span class="time">[21:35:49]</span>
    Time 2
</p>