Simulieren hover mit JavaScript-Ereignisse

Ist es möglich zu simulieren hover mit JavaScript Events? Ich habe versucht, die Injektion mouseover-event auf dem Ziel-element, aber kein Glück.

Zum Beispiel, wenn es gibt einen link mit einem hover-selector, ist es möglich, "hover" mit JavaScript-Ereignisse? Im Grunde will ich auslösen CSS-hover. Sie können davon ausgehen, ich kann nicht mit jQuery.

Man könnte hinzufügen einer css-Klasse namens "hover" und hinzufügen oder entfernen, wie gebraucht, nur Stil es nun genau so wie bei hover. stackoverflow.com/a/1283072/1217408
Meinst du das auslösen der css-hover-styling via javascript?
Sie können einen Blick auf diesen hier SO: stackoverflow.com/questions/608788/...
Ja, ich möchte trigger CSS hover mit JavaScript-Events nur. Sie können davon ausgehen, ich kann nicht mit jQuery.
Meinst du, dass Sie auslösen möchten die native hover-Aktion oder wollen Sie trigger-Handler angeschlossen?

InformationsquelleAutor bellpeace | 2012-07-30

  1. 4

    Das jQuery hover event ist nur mit mouseenter und mouseleave Veranstaltungen. Hier ist die Quelle von jQuery ' s hover:

    function (fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
    Wie cross-browser-diese Ereignisse sind? Es scheint, dass, unterstützt durch die FF ab version 10.
    href="http://www.quirksmode.org/dom/events/mouseover.html" >quirksmode.org/dom/events/mouseover.html

    InformationsquelleAutor Tim Banks

  2. 1

    Ja, Sie würde einfach hinzufügen, onMouseOver und onMouseOut Veranstaltungen, um das element in Frage

    Wie diese:

    <div class="something" onmouseover="hover(this);" onmouseout="unhover(this);">

    Dann machen Sie Ihr javascript ändern Sie die element-Klasse (wenn Sie möchten, zwei verschiedene CSS-Klassen) oder ändern Sie einfach das element, das den Stil direkt. Sie könnte so etwas tun.

    <script>
function hover(element) {
    element.setAttribute('class', 'something hover');
}
function unhover(element) {
    element.setAttribute('class', 'something');
}
</script>

    Bitte beachten Sie, dass Sie können auch benutzen Sie eine Bibliothek wie jQuery zu handhaben, sogar mehr, einfach.

    Ich habe bereits ein element mit hover-CSS angewendet. Ich will trigger, der hover-Ereignis per JavaScript.
    Ich habe einige javascript zum Beispiel.
    Ich glaube, Sie verpasste meinen Punkt. Ich bin kein crafting-Seite (d.h. die Seite kann Zufall sein), ich will einfach nur, um zu simulieren hover mit JavaScript-Ereignisse.

    InformationsquelleAutor Mike Brant

  3. 1

    Eigentlich, CSS hover-Ereignis ist einfacher, als nur Bindung diese beiden Ereignisse mouseenter und mouseleave. Es wird also noch ein wenig mehr Bemühungen, die:

    1.Duplizieren Sie das element

    2.Fügen Sie einen listener hinzu, um mouseenter-Ereignis

    3.Rekursiv wiederholen Sie Schritt 1,2 und wiederherstellen das geklonte element on mouseleave

    Hier ist mein Entwurf.

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

    Bitte beachten Sie, dass cloneNode kopiert keine Ereignis-Listener, so müssen Sie manuell wiederzuverbinden Veranstaltungen, um das geklonte element und alle seine Kinder sich.

    InformationsquelleAutor Lewis

  4. 1

    Ist es möglich zu simulieren hover mit JavaScript-Ereignisse.
    Erstellt habe ich ein Modul für den Austausch von Bildern auf hover. Sie können Experimentieren und passen Sie das Modul an Ihre Bedürfnisse anzupassen. Für das Beispiel, ich habe die Pfade zu den Bildern und DOM-Auswahl Elemente generic.

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

    InformationsquelleAutor

Schreibe einen Kommentar