使用 JavaScript 事件模拟悬停答案

【问题标题】：Simulate hover using JavaScript events使用 JavaScript 事件模拟悬停
【发布时间】：2012-07-30 19:39:31
【问题描述】：

是否可以使用 JavaScript 事件模拟悬停？我尝试在目标元素上注入鼠标悬停事件，但没有运气。

例如，如果有一个带有悬停选择器的链接，是否可以使用 JavaScript 事件“悬停”它？基本上，我想触发 CSS 悬停。你可以假设我不能使用 jQuery。

【问题讨论】：

您可以添加一个名为“hover”的 css 类并根据需要添加或删除它，只需将其样式设置为与悬停完全相同。 stackoverflow.com/a/1283072/1217408
你的意思是通过javascript触发css-hover样式吗？
你可以在这里查看这个：stackoverflow.com/questions/608788/…
是的，我只想使用 JavaScript 事件触发 CSS 悬停。你可以假设我不能使用 jQuery。
@bellpeace 您的意思是要触发本机悬停动作还是要触发附加到它的处理程序？

【解决方案1】：

jQuery 悬停事件只是使用mouseenter 和mouseleave 事件。这是jQuery的悬停来源：

function (fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}

【讨论】：

这些事件有多跨浏览器？从版本 10 开始，FF 似乎支持它。

【解决方案2】：

是的，您只需将 onMouseOver 和 onMouseOut 事件添加到相关元素

像这样：

<div class="something" onmouseover="hover(this);" onmouseout="unhover(this);">

然后让您的 javascript 更改元素的类（如果您想要两个不同的 CSS 类）或直接修改元素的样式。你可以这样做。

<script>
function hover(element) {
    element.setAttribute('class', 'something hover');
}
function unhover(element) {
    element.setAttribute('class', 'something');
}
</script>

请注意，您还可以使用像 jQuery 这样的库来更简单地处理这个问题。

【讨论】：

我已经有一个应用了悬停 CSS 的元素。我想使用 JavaScript 触发悬停事件。
@bellpeace 我在示例中添加了一些 javascript。
我认为你错过了我的观点。我不是在制作页面（即页面可以是随机的），我只是想使用 JavaScript 事件来模拟悬停。

【解决方案3】：

其实CSS hover事件比仅仅绑定mouseenter和mouseleave这两个事件更方便。所以它需要更多的努力，它们是：

1.克隆元素

2.为 mouseenter 事件添加监听器

3.递归重做步骤1,2并在mouseleave上恢复克隆的元素

这是我的工作草稿。

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);
    });
}

请注意，cloneNode 不会复制事件侦听器，因此您需要自己手动将事件重新绑定到克隆的元素及其所有子元素。

【讨论】：

【解决方案4】：

可以使用 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);

【讨论】：