CSS: Change Button appearance on Hover

Question

I have a button in my web page with class "btnNewL1" . my CSS class is as below

.btnNewL1
{

background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}

When user place the mouse over the button,i want to chnage the appearance like change of bg image and chnage of border color etc... . I want to do this will CSS itself. and it should be be supported by IE6 IE 7 ,Firefox

How to do this ?

Answer 1

Combine the tw images into one and then change the background position.

CSS sprite

CSS Sprites: Image Slicing’s Kiss of Death

Answer 2

This SO question "How to use ‘hover’ in CSS" might help you.

I think what you are looking for the :hover class.

Here is an example at w3schools.

The example is for color, but I believe you can do this with other styles.

Answer 3

Have a look at pseudo-classes

.btnNewL1:hover{
    background: url(../images/different.png);
}

Answer 4

You want the :hover pseudo-class. Use .btnNewL1:hover { ... } for your mouse-over styles.

See also the CSS2 spec for more info on pseudo-classes.

Answer 5

Unfortunately :hover pseudo selector is not supported by IE6 on any other element than <a>.

If you wish to implement :hover on IE6, you can:

a) If possible, change your <input class="btnNewL1" type="button" value="click me!" /> to <a class="btnNewL1" href="#">click me!</a>. You will need to add display:block, and few other CSS rules. This will simply 'simulate' button using <a> tag. This is not perfect solution because sometimes you must use proper <input> (i.e. when using asp.net controls).

b) Use javascript to make workaround, example in jQuery is:

<script type="text/javascript">
$(document).ready(function(){
    $("input.btnNewL1").mouseover(function(){
      $(this).toggleClass('buttonSelected');
    }).mouseout(function(){
      $(this).toggleClass('buttonSelected');
    });
});
</script>
<input type="button" value="click me!" class="btnNewL1" />

c) Wrap your code like that:

<a class="acont" href="#"><input type="button" value="click me!" /></a>

So you will be able to use CSS:

.acont:hover input { background:red; }

This will do the job, but as far I remember this is not valid HTML (<input> should not be placed inside <a> tag)

Which one you gonna choose - up to you. Main point from this post is, again: :hover pseudo selector can be used on IE6 only on anchor elements