Question

An interface of control-buttnos is released on default browser’s styles. I try to use standart buttons () with images as values

HTML:

<div id="control-play" class="button"><span></span><input type="button" value=""/></div>

CSS:

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}

But of course I get a problem with :hover event when the cursor’s hovering an image:

In JS I can activate click by catching images’s onClick:

$('#control-play span').click(function(){$(this).parent().find('input').click();})

But I can’t do that for onHover event.

As you can see, I don’t imitate :hover {} and :active() styles, I use default ones. I could grab images and use them as backgrounds but it doesn’t seem a good-style trick.

So, colleagues, any ideas? Any of jQuery, CSS3 or HTML5 are welcome.

UPD: I mentioned it carefully, nevertheless most of answers suggest toggling whole background of the button. Note: I use buttons with browser’s styles, I just try to use 16×16 icons instead of text labels.

Answer 1

The most suitable answer is in using HTML5 <button>...</button> instead of <input type=button value=""/>

HTML:

<button type="button" id="control-play" title="Play"><span></span></button>

CSS:

button#control-play {width: 50px; height: 49px;}
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;}

There’s no need in sprites, 3 backgrounds for imitation standart browser opportunities for buttons. Everyone will use these buttons in its favorite style (even using skin for a browser), and only my icons will be permanent.

Via Pointy‘s comment.