使用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事件模擬懸停

回答

相關問題