使用JavaScript事件模拟悬停

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

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

2012-07-30 bellpeace

您可以添加一个名为“悬停”的CSS类，并根据需要添加或删除它，只需将其设置为像悬停一样。 http://stackoverflow.com/a/1283072/1217408 – TheZ 2012-07-30 19:40:52

你的意思是通过javascript触发CSS悬停式样？ – Esailija 2012-07-30 19:41:27

你可以在这里看看这个SO：http://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover – Nikola 2012-07-30 19:41:55

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

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

来源

2012-07-30 19:52:04

这些事件如何跨浏览器？它似乎是从版本10的FF支持。 – bellpeace 2012-07-30 20:28:16

@bellpeace http://www.quirksmode.org/dom/events/mouseover.html – TheZ 2012-07-30 21:19:27

是的，你只需添加的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这样的库来处理这个问题。

来源

2012-07-30 19:51:57

我已经有一个应用了悬停CSS的元素。我想通过使用JavaScript来触发悬停事件。 – bellpeace 2012-07-30 20:51:44

@bellpeace我在示例中添加了一些javascript。 – 2012-07-30 20:55:47

我想你错过了我的观点。我没有制作页面（即页面可以是随机的），我只想使用JavaScript事件模拟悬停。 – bellpeace 2012-07-31 11:54:11

其实，CSS悬停事件不仅仅是结合这两个事件mouseenter和mouseleave更方便。因此，它需要多一点的努力，它们是：

1.Clone元素

2.添加一个监听到MouseEnter事件

3.Recursively重做一步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不会复制事件监听器，所以你需要手动重新绑定事件到克隆元素及其所有的孩子自己。

来源

2015-01-02 04:04:32 Lewis

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

来源

2015-03-16 15:10:22

使用JavaScript事件模拟悬停

回答

相关问题