javascript mouseover/out 结合点击行为

Question

我是编程新手，请大家多多包涵。下面是我的代码:

$(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 示例向我解释，那就太好了。感谢您的提前帮助。

Answer 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，您可以通过e.currentTarget 在click 事件回调中直接访问链接元素。