jQuery button state active

javascript, jquery, jquery-ui

Solution

Simple workaround

Another suggestion is to use `ui-state-highlight` instead.

Manually handle hover

Aside from using a `checkbox` & `label` combination instead of a `div`, the only workaround I've used is to unbind `mouseover` & `mouseout` from the button post-initialization, then binding my own `mouseover`/`mouseout` function to the button that handles the toggling of `ui-state-hover` myself.

this.button = $('<div>')
    .html(this.text)
    .addClass(this.options.baseClass)
    .attr('title', this.getTitle())
    .click(this.click.bind(this))
    .button()
    .unbind('mouseover mouseout hover')
    .bind('mouseover', function() {
        $(this).addClass('ui-state-hover');
    }).
    bind('mouseout', function() {
        $(this).removeClass('ui-state-hover');
    });

Problem

How can I make a jQuery UI button maintain `ui-state-active`? I have a button, that I want to be a toggle button. So when I activate it should stay active. Currently if I set `ui-state-active` on a button it will get removed if I hover over it. The markup for the button is just: ``` this.button = $('<div>') .html(this.text) .addClass(this.options.baseClass) .attr('title', this.getTitle()) .click(this.click.bind(this)) .button(); ``` And the button must be a `div`, it can't be a `checkbox`. ???

Original source