Question

我有一个隐藏/显示超时时悬停时间的功能。但现在我想让它显示一个用户徘徊的时间。我知道必须用$（这个）来完成，但我无法让它工作。

<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>

Answer 2

首先，纯CSS解决方案可能是最好的，as shown by Chris Pietschmann。

如果你想对你已经采取的方法进行微小的改动，可以采取一种方法（jsFiddle）：

我们不会在hide()上暂停span，而是默认隐藏它，并根据悬停状态显示/隐藏它。

此外，使用课程.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

以下是代码的外观：

＆＃13;

var msgTime = $('.div-time');
msgTime.hover(
  function() {
    $(this).find('.time').show();
  },
  function() {
    $(this).find('.time').hide();
  }
);

＆＃13;

.time {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 3

几个问题。

首先，在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();
         }
    );

在div标记上使用<p>类似乎非常混乱。在大型应用程序上，这可能会导致很多混乱

的 DEMO

Answer 4

你的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>

在悬停显示当前时间

4 个答案: