3

プログラミング初心者です、よろしくお願いします。以下は私のコードです：

$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})

$(function(){
    document.getElementById("custom_link").addEventListener("click",function(){
    document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
    },false)})

私がやりたいことは次のとおりです。

  1. ユーザーが「custom_link」にマウスを合わせると、「custom_div」が強調表示されます。
  2. ユーザーが「custom_link」からマウスを離すと、「custom_div」のハイライトが削除されます。
  3. ユーザーが「custom_link」をクリックすると、「custom_div」が再び強調表示されます。ただし、ユーザーがマウスを離しても、「highlightDiv」は引き続き「custom_div」に追加されます。

私のコードによると、ホバリング時の挙動がおかしくてうまく動かない。完全なコード構造またはjsfiddleの例で説明していただければ幸いです。事前にご協力いただきありがとうございます。

4

3 に答える 3

1

http://jsfiddle.net/ETrjA/2/

$('#custom_link').hover(function () {
    $('#custom_div').toggleClass('highlighted'); 
});

$('#custom_link').click(function (e) {
   $('#custom_div').addClass('highlighted');
   $(e.currentTarget).unbind('mouseenter mouseleave');
});

必要なクラスは 1 つだけで、を介してイベント コールバックhighlighted内でリンク要素に直接アクセスできます。clicke.currentTarget

于 2013-02-12T09:25:08.047 に答える
0

ここにリンクがありますhttp://jsfiddle.net/8GV7B/2/

 $(function(){
        mouse_is_clicked = false;
         $(".custom_link").hover(function(){ 
            $("#container").addClass("highlight");
        }, function(){ 
            if(!mouse_is_clicked){ 
                $("#container").removeClass("highlight");
            }else{
                mouse_is_clicked = false;
            }
        });

          $(".custom_link").click(function(){
               $("#container").addClass("highlight");
              mouse_is_clicked = true;
          });
    });
于 2013-02-12T10:03:03.807 に答える