悬停时显示当前时间

On hover show current time

本文关键字：时间 显示 悬停      更新时间：2024-06-21

我有一个函数，可以隐藏/显示悬停时的超时时间。但现在我想让它显示一个用户徘徊的时间。我知道必须用美元来完成，但我做不到。

JsFiddlehttp://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();
     }
);

这里有一个纯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>

首先，在这种情况下，纯CSS解决方案可能是最好的，如Chris Pietschmann所示。

如果你想对你已经采取的方法做一些小的改变，这里有一种方法（jsFiddle）：

我们没有在保持时间的span上调用hide()，而是默认情况下将其隐藏，并根据悬停状态显示/隐藏它。

此外，将类.div用于您的时间持有div可能是个坏主意，因为它会选择页面上的所有div。使用更具体的div-time会更好。

至于不知道如何使用$(this)，jquery事件选择器会在事件回调中自动传输上下文（即this），以对应于事件发生的元素。

另一件事是，您将一个jquery对象传递给find jquery函数，但该函数将一个选择器字符串作为参数，并使用它来查找调用find的jquery元素中的元素。所以，你需要改变：

$(this).find(time)     // dont pass-in the jquery object "time"

收件人：

$(this).find('.time') // pass in the selector matching the class "time"

因此，当用户悬停在一个元素上时，你可以做的是：

 $(this)         // select hovered element
  .find('.time') // find the time span within it
  .show();       // show the time

以下是代码的外观：

var msgTime = $('.div-time');
msgTime.hover(
  function() {
    $(this).find('.time').show();
  },
  function() {
    $(this).find('.time').hide();
  }
);
.time {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="div-time">
  <span class="time">[20:33:49]</span>
  Time 1
</p>
<p class="div-time">
  <span class="time">[21:35:49]</span>
  Time 2
</p>

几个问题。

首先，在setTimeout中，由于闭包，您将丢失this的上下文。

要使用find()搜索实例，请使用实际的选择器

    var msgTime = $('.div');
    var time = $('span.time');
    time.hide();
    var x;
    msgTime.hover(
        function () {
            var $this = $(this); //store reference of element
            x = setTimeout( function() {  
                $this.find('.time').show();// look for actual class
            }, 100);
         }, 
         function () {
            clearInterval(x);
             $(this).find('.time').hide();
         }
    );

在<p>标签上使用div类似乎非常令人困惑。在大型应用程序上，这可能会导致的混乱

DEMO

您的css：

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

你的html:

<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>
相关文章：