Home/ Questions/Q 745609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T09:36:11+00:00

I am a bit confused with this: I have a page with a set

  • 0

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 attribute ‘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 attribute ‘grp2’ is clicked on (note: it has to be ‘enabled’ first), I disable all ‘buttons’ in that group (i.e. remove the ‘enabled’ class for all elements with class ‘grp2’ (should probably selecting for elements with class ‘button grp2’ 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 behavior is still applied to these elements (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)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could attach hover listener to all buttons, and then check at runtime, whether the particular button has class enabled.

    $(".button").hover(function(){
    if ($(this).hasClass('enabled')) {
      $(this).addClass('button-hover');
    }
  }, function() {
    $(this).removeClass('button-hover');
});
    • 0