Question

如何检测：hover转换的结束？我已经尝试了在过渡处到处都可以找到的代码：

document.getElementById('title-text').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {

console.log('done');

});

Answer 1

您应该注意hotel.roomAvailable()事件侦听器，因为它仅在转换完成后才起作用，而不是在用户将鼠标从元素中拉出时才起作用。

有人提到要关注transitionend事件，不要这样做。

mouseout

document.getElementById('title-text').addEventListener('transitionend', function(e) {
  console.log('done');
});

#title-text {
  font-size: 60px;
  font-weight: bold;
  transition: 4s ease-in-out;
}

#title-text:hover {
  font-size: 100px;
}

也，如果您只希望执行一次，请使用<div id='title-text'>This is Text</div> jQuery方法执行此操作：

.one()

$('#title-text').one('transitionend', function(e) {
  console.log('done');
});

#title-text {
  font-size: 60px;
  font-weight: bold;
  transition: 4s ease-in-out;
}

#title-text:hover {
  font-size: 100px;
}

Answer 2

在javascript中，使用事件监听器检测鼠标移出

element.addEventListener('mouseout', function () {} )

对于HTML也是一样

<element onmouseout='function name()'> </element>

对于CSS，您只需将鼠标悬停在常规样式上即可

悬停：

.name { 
    size: 10px;
}

将鼠标悬停在

上

.name:hover {
    size: 20px;
}

如何检测悬停过渡的结束

2 个答案: