使用 JavaScript 事件模拟悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11728406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulate hover using JavaScript events
提问by bellpeace
Is it possible to simulate hover using JavaScript Events? I tried injecting mouseover event on the target element but no luck.
是否可以使用 JavaScript 事件模拟悬停？我尝试在目标元素上注入鼠标悬停事件，但没有成功。
For example, if there is a link that has a hover selector, is it possible to "hover" over it using JavaScript Events? Basically, I want to trigger CSS hover. You can assume I can't use jQuery.
例如，如果有一个带有悬停选择器的链接，是否可以使用 JavaScript 事件“悬停”在它上面？基本上，我想触发 CSS 悬停。你可以假设我不能使用 jQuery。
采纳答案by Tim Banks
The jQuery hover event is just using mouseenterand mouseleaveevents. Here is the source of jQuery's hover:
jQuery 悬停事件只是使用mouseenter和mouseleave事件。这是jQuery悬停的来源：
function (fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
回答by Lewis
Actually, CSS hover event is more convenient than just binding these two events mouseenterand mouseleave. So it'll need a little more efforts, which are:
实际上，CSS 悬停事件比仅仅绑定这两个事件mouseenter和mouseleave. 所以它需要更多的努力，它们是：
1.Clone the element
1.克隆元素
2.Add a listener to mouseenter event
2.为mouseenter事件添加监听器
3.Recursively redo step 1,2and restore the cloned element on mouseleave
3.递归redo step 1，2恢复mouseleave上克隆的元素
Here is my working draft.
这是我的工作草案。
function bindHoverEvent(element,listener){
var originalElement = element.cloneNode(true);
element.addEventListener('mouseenter',listener);
element.addEventListener('mouseleave',function(){
bindHoverEvent(originalElement,listener);
this.parentNode.replaceChild(originalElement,this);
});
}
Please note that, cloneNodedoes not copy event listeners, so you need to manually rebind events to the cloned element and all its children yourself.
请注意，cloneNode不会复制事件侦听器，因此您需要自己手动将事件重新绑定到克隆元素及其所有子元素。
回答by Joe Swislocki
It is possible to simulate hover using JavaScript events. I created a module for swapping out images on hover. You can experiment and adapt the module to fit your needs. For the example, I made the image paths and DOM selection elements generic.
可以使用 JavaScript 事件模拟悬停。我创建了一个用于在悬停时交换图像的模块。您可以试验和调整模块以满足您的需求。例如，我使图像路径和 DOM 选择元素通用。
// module for swapping out images on hover
var imageSwap = (function ModuleFactory() {
"use strict";
var imageContainer = document.getElementById("image-container"),
image = document.getElementsByClassName("image")[0],
imageSource1 = 'path/to/your/image1',
imageSource2 = 'path/to/your/image2';
function handleImageSwap(e) {
if (e.target.id === "image-container") {
image.setAttribute("src", imageSource2);
e.target.addEventListener("mouseleave", function _handler_() {
image.setAttribute("src", imageSource1);
e.target.removeEventListener("mouseleave", _handler_, false);
}, false);
}
}
function init() {
imageContainer.addEventListener("mouseenter", handleImageSwap, false);
}
var publicAPI = {
init: init
};
return publicAPI;
})();
document.addEventListener("DOMContentLoaded", imageSwap.init(), false);
回答by Mike Brant
Yes, you would simply add onMouseOver and onMouseOut events to the element in question
是的，您只需将 onMouseOver 和 onMouseOut 事件添加到相关元素
Like this:
像这样：
<div class="something" onmouseover="hover(this);" onmouseout="unhover(this);">
Then make your javascript change the element's class (if you want two different CSS classes) or simply modify the element's style directly. You could do something like this.
然后让你的 javascript 改变元素的类（如果你想要两个不同的 CSS 类）或者直接修改元素的样式。你可以做这样的事情。
<script>
function hover(element) {
element.setAttribute('class', 'something hover');
}
function unhover(element) {
element.setAttribute('class', 'something');
}
</script>
Please note that you can also use a library like jQuery to handle this even more simply.
请注意，您还可以使用 jQuery 之类的库来更简单地处理此问题。
