I am a bit confused with this:
I have a page with a set of
buttons (i.e. elements with class attribute 'button'. The
buttons belong to one of two classes (grp1 and grp2).
These are my requirements
For
buttons with class enabled, when the
mouse hovers over them, a 'button-hover' class is added to them (i.e. the element the
mouse is hovering over). Otherwise, the hover event is ignored
When one of the
buttons with class grp2 is clicked on (it has to be 'enabled' first), then I disable (i.e. remove the 'enabled' class for all elements with class 'enabled' (should probably selecting for elements with class 'button' AND 'enabled' - but I am having enough problems as it is, so I need to keep things simple for now).
This is what my page looks like:
<html>
<head>
<title>Demo</title>
<style type="text/css"
.button {border: 1px solid gray; color: gray}
.enabled {border: 1px solid red; color: red}
.button-hover {background-color: blue; }
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="btn-cntnr">
<span class="grp1 button enabled">button 1</span>
<span class="grp2 button enabled">button 2</span>
<span class="grp2 button enabled">button 3</span>
<span class="grp2 button enabled">button 4</span>
</div>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".button.enabled").hover(function(){
$(this).toggleClass('button-hover');
}, function() {
$(this).toggleClass('button-hover');
});
$('.grp2.enabled').click(function(){ $(".grp2").removeClass('enabled');}
});
/* ]]> */
</script>
</body>
</html>
Currently, when a button with class 'grp2' is clicked on, the other elements with class 'grp2' have the 'enabled' class removed (works correctly).
HOWEVER, I notice that even though the class no longer have a 'enabled' class, SOMEHOW, the hover behaviour is still applied to these elemets (WRONG). Once an element has been 'disabled', I no longer want it to respond to the hover() event.
How may I implement this behavior, and what is wrong with the code above (i.e. why is it not working? (I am still learning jQuery)
