Моделирование наведения с использованием событий JavaScript

Question

Можно ли моделировать наведение с использованием событий JavaScript? Я пробовал вставлять событие mouseover на целевой элемент, но не повезло.

Например, если есть ссылка, которая имеет селектор hover, возможно ли «навести» его на использование JavaScript-событий? В принципе, я хочу вызвать CSS-зависание. Вы можете предположить, что я не могу использовать jQuery.

Answer 1

Событие hQuery hover только с использованием 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.Clone элемента

2.Add слушатель 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 не копирует слушателей событий, так что вам нужно вручную перепривязывают события в клонированного элемента и всех своих детей самостоятельно.

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