第二个悬停事件

Question

在div中触发第二个悬停事件后是否可以执行某些操作？

例如

<div class="items">
  <div class="hover-me"></div>
  <div class="hover-me"></div>
  <div class="hover-me"></div>
</div>

.hover-me第二次徘徊时怎么办？它应该只检查.items父母内部的悬停。

Answer 1

在每个元素的数据中存储一个计数器，并在每个悬停时增加它，如果它变为两个，那就行了你的魔法：

HTML：

<div class="items">
    <div class="hover-me" data-hovercount="0"></div>
    <div class="hover-me" data-hovercount="0"></div>
    <div class="hover-me" data-hovercount="0"></div>
</div>

JS：

$(".hover-me").on('mouseenter', function() {
    var $this = $(this), $this.data('hovercount', parseInt($this.data('hovercount')) + 1);
    if ($this.data('hovercount') == 2) {
        //do something.
    }
});