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

您正在将 Javascript 与其框架 jQuery 混合。为此坚持使用 jQuery。

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    background:yellow;
}

jQuery

$(function(){
     $('.custom_link').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('.custom_link').click(function(){
           $(this).addClass('highlight_stay');
      });
});
于 2013-02-12T09:16:16.867 回答
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');
});

您只需要一个类,您可以通过在事件回调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 回答