Javascript mouseover / out combined with click behavior
I am very new to programming, please give me mercy. Below is my code:
$(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)})
What I want to do:
- when the user hovers over "custom_link", "custom_div" is highlighted.
- when the user moves the mouse out of "custom_link", the selection on "custom_div" is removed.
- when the user clicks on "custom_link" the "custom_div" is highlighted again. However, when the user moves the mouse, the "highlightDiv" is still added to the "custom_div".
According to my code, it is not working correctly because the hang behavior is weird. It would be really nice if you could explain to me the complete structure of the code or a jsfiddle example. Thank you for your help.
+3
Ajarn canz
source
to share
3 answers
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');
});
You only need one class highlighted
and you can access the reference element directly in the event callback click
via e.currentTarget
.
+1
Vinay
source
to share
You are mixing Javascript with its jQuery framework. Stick to jQuery for this.
// 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');
});
});
+1
Zevi Sternlicht
source
to share
here is the link 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;
});
});
0
UFM
source
to share