使用JavaScript事件模拟悬停

Question

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

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

Answer 1

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

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

Answer 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这样的库来更简单地处理这个问题。

Answer 3

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

1.克隆元素

2.为mouseenter事件添加一个监听器

3.Recursively重做步骤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不会复制事件侦听器，因此您需要手动将事件重新绑定到克隆元素及其所有子cloneNode 。

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