0

JSFiddle here. I've successfully removed the CSS applied by jqueryUI to my button except when it's being hovered over. If you hover over the button on the Fiddle, you'll see what is (to me) an unattractive grey border and background that I'd like to get rid of.

What I've tried:

$( "input[type=image]" ).button().removeClass("ui-state-default");
$( "input[type=image]" ).button().hover().removeClass("ui-state-hover");

and 

$("input[type=image]").button().removeClass("ui-state-default ui-state-hover")

and neither works.

Suggestions, please?

Clive van Hilten
  • 851
  • 5
  • 16
  • 32
  • What are you actually trying to achieve? The grey border/background is there BECAUSE you are calling `.button()`, which is used (once, normally) to make that element into a jQuery UI button... – Shai Nov 05 '13 at 17:32
  • Thanks Shai, I see what you're saying. – Clive van Hilten Nov 06 '13 at 09:52

2 Answers2

1

Just override it with your own CSS loaded after the jQuery UI CSS:

.ui-state-hover {
    background:none;
    border:none;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
1

Here is the working js code:

$( "input[type=image]" ).button().removeClass("ui-state-default");
$( "input[type=image]" ).button().hover(function(e){
    $(this).removeClass("ui-state-hover");
});

And the link to the fiddle: fiddle

aash
  • 1,323
  • 1
  • 14
  • 22