5

JavaScriptイベントを使用してホバーをシミュレートすることは可能ですか？ターゲット要素にマウスオーバーイベントを挿入しようとしましたが、うまくいきませんでした。

たとえば、ホバーセレクターがあるリンクがある場合、JavaScriptイベントを使用してそのリンクに「ホバー」することはできますか？基本的に、CSSホバーをトリガーしたいと思います。私はjQueryを使用できないと想定できます。

4

4 に答える 4

4

jQueryホバーイベントは、イベントを使用しているだけmouseenterですmouseleave。jQueryのホバーのソースは次のとおりです。

function (fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
于 2012-07-30T19:52:04.523 に答える
1

はい、問題の要素にonMouseOverイベントとonMouseOutイベントを追加するだけです。

このような：

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

次に、JavaScriptで要素のクラスを変更するか（2つの異なるCSSクラスが必要な場合）、要素のスタイルを直接変更します。あなたはこのようなことをすることができます。

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

jQueryのようなライブラリを使用して、これをさらに簡単に処理することもできることに注意してください。

于 2012-07-30T19:51:57.893 に答える
1

mouseenter実際、CSSホバーイベントは、これら2つのイベントとをバインドするよりも便利ですmouseleave。したがって、もう少し努力が必要になります。それは次のとおりです。

1.要素のクローンを作成します

2.mouseenterイベントにリスナーを追加します

13.ステップを再帰的にやり直し、 2mouseleaveでクローン要素を復元します

これが私の作業草案です。

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-02T04:04:32.637 に答える
1

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-16T15:10:22.137 に答える