Simuler passez la souris à l'aide de JavaScript événements

Est-il possible de simuler passez la souris à l'aide de JavaScript Événements? J'ai essayé d'injecter événement mouseover sur l'élément cible, mais pas de chance.

Par exemple, si il y a un lien qui a placez le sélecteur, il est possible de "hover" sur elle à l'aide de JavaScript Événements? En fait, je cherche à déclencher CSS hover. Vous pouvez supposer que je ne peux pas utiliser jQuery.

Vous pouvez ajouter une classe css appelé "hover" et ajouter ou supprimer en tant que de besoin, juste le style, c'est exactement comme en vol stationnaire. stackoverflow.com/a/1283072/1217408
Voulez-vous dire le déclenchement de la css hover style via javascript?
Vous pouvez prendre un coup d'oeil à ce ici DONC: stackoverflow.com/questions/608788/...
Oui, je veux déclencher CSS hover à l'aide de JavaScript uniquement sur les Événements. Vous pouvez supposer que je ne peux pas utiliser jQuery.
Voulez-vous dire que vous souhaitez déclencher le natif passez action ou voulez-vous pour déclencher des gestionnaires attaché à elle?

OriginalL'auteur bellpeace | 2012-07-30

  1. 4

    Le jQuery passez événement est seulement à l'aide de mouseenter et mouseleave événements. Voici la source de jQuery hover:

    function (fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
    Comment la croix-navigateur ces événements sont? Il paraît qu'on est pris en charge par FF à partir de la version 10.
    href="http://www.quirksmode.org/dom/events/mouseover.html" >quirksmode.org/dom/events/mouseover.html

    OriginalL'auteur Tim Banks

  2. 1

    Oui, vous pouvez tout simplement ajouter les évènements onMouseOver et onMouseOut à l'élément en question

    Comme ceci:

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

    Ensuite faire votre javascript changer l'élément de la classe (si vous avez besoin de deux différentes classes CSS) ou tout simplement modifier l'élément de style directement. Vous pourriez faire quelque chose comme cela.

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

    Veuillez noter que vous pouvez également utiliser une librairie comme jQuery pour gérer cette situation encore plus simplement.

    J'ai déjà un élément avec hover CSS appliquée. Je veux déclencheur qui planent événement à l'aide de JavaScript.
    J'ai ajouté un peu de javascript pour l'exemple.
    Je pense que vous avez manqué mon point. Je ne suis pas de l'élaboration de la page (c'est à dire, la page peut être aléatoire), je veux juste simuler passez la souris à l'aide de JavaScript événements.

    OriginalL'auteur Mike Brant

  3. 1

    En fait, CSS hover événement est plus pratique que de simplement la liaison de ces deux événements mouseenter et mouseleave. Donc il faudra un peu plus d'efforts, qui sont:

    1.Clone de l'élément

    2.Ajouter un écouteur d'événement mouseenter

    3.De manière récursive refaire l'étape 1,2 et de restauration de l'élément cloné sur mouseleave

    Voici mon projet de travail.

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

    Veuillez noter que, cloneNode ne copie pas les écouteurs d'événement, donc vous devez les relier manuellement les événements de l'élément cloné et tous ses enfants vous-même.

    OriginalL'auteur Lewis

  4. 1

    Il est possible de simuler en vol stationnaire à l'aide de JavaScript événements.
    J'ai créé un module pour échanger des images sur le vol stationnaire. Vous pouvez expérimenter et d'adapter le module en fonction de vos besoins. Pour l'exemple, j'ai fait les chemins de l'image et DOM éléments de sélection générique.

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

    OriginalL'auteur