How to style different hover colors for jquery dialog buttons

Question

I won't to give a different hover colors to my jquery dialog buttons. For example when the user will hover over the "Ok" button the hover color will be blue and when he hovers over the cancel button the hover color will be gray. Can anyone tell me how can I do it?

Answer 1

Basic theory: use one or more css classes which you add to your html object dynamically on mouse-in, and remove on mouse-out. You can take a look at the jQuery hover event and some examples of how to work with attributes in jQuery to get an idea of how to do it.

In detail: There are two different ways to approach this that I can immediately think of, depending on where you want to make the ok/cancel button "decision".

1. Add two different classes to your stylesheet with different background colors, and add one class to each element. That means you'll need two very similar jQuery methods, but most of it can be factored out to avoid duplication.

2. Hard-code different class names on your buttons (or use button id's or someting) and make two different css selectors, for example something like .ok .hover { your style here } and .cancel .hover { your style here }. Then you just need one jQuery call, that hits both buttons with the jQuery selector and adds/removes the hover class.

Answer 2

You can use this function:

function changeButtonClass(buttonIndex, classes) {
 var selector = 'div[class^=ui-dialog-buttonpane] > button';
 var buttonConcerned;
 if (buttonIndex >= 0) {
  buttonIndex++;
  buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')');
 } else {
  return;
 }
 buttonConcerned.removeClass();
 buttonConcerned.addClass(classes[0]);
 buttonConcerned.
  hover(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[1])
   },
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[0])
  })
  .focus(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[2])
   })
  .blur(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[0])
   });
}

And then call your function with this (for a 3 buttons dialog):

var classes = new Array('myClass', 'myClass2', 'myClass2');
changeButtonClass(0, classes);
var classes = new Array('myClass3', 'myClass4', 'myClass4');
changeButtonClass(1, classes);
changeButtonClass(2, classes);

And so it works ;)