使用JavaScript事件模拟悬停效果

Question

能否使用JavaScript事件模拟悬停效果？我尝试注入目标元素的mouseover事件，但没有成功。

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

- bellpeace

---

你可以添加一个名为“hover”的CSS类，并根据需要添加或删除它，只需将其样式设置与悬停状态完全相同。http://stackoverflow.com/a/1283072/1217408 - TheZ

你的意思是通过JavaScript触发CSS-hover样式吗？ - Esailija

你可以在 Stack Overflow 上查看这个问题：https://dev59.com/FXRB5IYBdhLWcg3weXSX - Nikola

是的，我想仅使用JavaScript事件来触发CSS hover。您可以假设我不能使用jQuery。 - bellpeace

@bellpeace 你的意思是要触发本地的悬停动作还是要触发附加在其上的处理程序？ - ryanve

了解你为什么想这样做会有所帮助，因为“最佳”答案可能是不同的。例如，如果你只是想在没有实际鼠标操作的情况下动态应用样式，那么像@TheZ建议的那样切换一个“hover”类是最直接的方法。 - Stephen P

Answer 1

jQuery的hover事件只是使用mouseenter和mouseleave事件。以下是jQuery的hover源代码：

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

- Tim Banks

---

这些事件在多个浏览器中兼容吗？看起来火狐浏览器从10版本开始支持。 - bellpeace

Answer 2

可以使用JavaScript事件模拟hover效果。 我创建了一个用于在悬停时替换图像的模块。您可以尝试并调整该模块以适应您的需要。对于示例，我将图像路径和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);

- Joe Swislocki

Answer 3

实际上，CSS hover事件比仅绑定这两个事件mouseenter和mouseleave更方便。因此，需要付出一些额外的努力，包括：

1.克隆元素

2.添加鼠标进入事件监听器

3.递归地重复步骤1、2并在鼠标离开时恢复克隆的元素

这是我的草稿。

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不会复制事件监听器，因此您需要手动重新绑定克隆元素及其所有子元素的事件。

- Lewis

Answer 4

是的，您只需将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的库来更简单地处理这个问题。

- Mike Brant

---

我已经有一个应用了hover CSS的元素。我想通过使用JavaScript来触发该hover事件。 - bellpeace

@bellpeace 我已经在示例中添加了一些 JavaScript。 - Mike Brant

我认为你没有理解我的意思。我不是在制作页面（即页面可以是随机的），我只想使用JavaScript事件模拟悬停。 - bellpeace