Question

I have some buttons on a page, around 10 asp buttons. I’m using a CSS class for effects on button mouse hover and mouse leave. The problem I’m facing is that when I click a button, I want to apply a CSS class to the clicked button and want to keep it, but when I hover on that button the class is removed. Actually, I want to kind of disable the change of class for selected (clicked) button. So, if I have 5 buttons btn1, btn2, btn3, btn4, btn5 and my selected button is btn3, if I hover on btn3 and leave this btn3 , it should not loose its css class.

This is my code for applying CSS classes:

 <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            // mouse hover
            $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction);
            // mouse leave
            $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);           

        });

        function mouseleavefunction() {

            $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass");
        }

        function mouseenterfunction() {

            $(this).addClass("pagerbtnMouseEnter");
        }

    </script>

and the code I’m using when a button is clicked:

     private void SetSelectedButtonStyle()
            {
ResetCss():
                //selectedItemClass 
                Button selectedButton = FindButtonWithText(_currentPageIndex.ToString());
                if (selectedButton != null)
                {
                    selectedButton.CssClass = "pagerbtnMouseEnter";
                }
            }

 private void ResetCss()
        {            

            for (int i = 1; i <= MAX_PAGE_SIZE; i++)
            {
                Button btn = (Button)FindControl(string.Format("btn{0}", i));
                btn.CssClass = "buttonclass";
            }
        }

I have to prevent the selected button from changing the CSS class when I do a mouse hover or mouse leave.

Answer 1

You button has 3 different states :
– Normal
– Hovering
– Selected

Why do you only have 2 classes? If you wanna do that way you should have another css class for the pressed state, and then on your hovering functions you’ll check if your button has the selected class , and if it has then do nothing.

But don’t you know that the hovering state is possible by css only?

.myClass
{
  background-color : blue;
}

.myClass:hover
{
  background-color : red;
}

This will change the background color of a myclass element whenever your hover it.

So what you can do is delete all your jquery code for the mouseenter / mouseleave

Create a new class for the clicked state.

.buttonClass
{
   // Your button style
}
.buttonClass:hover
{
   // Your mousein button style 
}
.buttonClicked
{
   // Your selected/clicked button style
}

And on your asp.net page juste replace the .button class of the clicked button with the buttonClicked class 🙂