我对编程很陌生,请宽恕我。以下是我的代码:
$(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)})
我想做的是:
- 当用户将鼠标悬停在"custom_link"上时,"custom_div"将高亮显示
- 当用户将鼠标移出"custom_link"时,"custom_div"处的高亮显示将被消除
- 当用户在"customlink"处单击时,"customdiv"将再次高亮显示。但是,当用户将鼠标移出时,"highlightDiv"仍被添加到"custom_div"中
根据我的代码,它不能正常工作,因为悬停时的行为很奇怪。如果你能用完整的代码结构或jsfiddle示例来解释我,那就太好了。感谢您的提前帮助。
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
事件回调中访问链接元素。
您正在将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');
});
});
这里有一个链接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;
});
});