Question

Okay first the code..

<td class="btnSaveBooking">
    <div class="btnSaveBookingContainder">
        <div id="save">
            <span class="btnImage"></span><span class="btnsavebookingspan">
                <input type="submit" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" id="btnSaveBooking" value="" name="btnSaveBooking">
                (F8)</span></div>
    </div>![enter image description here][1]
</td>

The images

Normal
OnMouseOver at the button
OnMouseOver at the imaage

As you can see, when user hovers exactly over the image, then only is the background of image changing, what I want is, when user even hovers over this button, the image should change.

Here’s the css

.btnSaveBooking {
   border-top: 1px solid #7abbde;
    background: #1776a6;
   background: -webkit-gradient(linear, left top, left bottom, from(#7ec5e8), to(#1776a6));
   background: -webkit-linear-gradient(top, #7ec5e8, #1776a6);
   background: -moz-linear-gradient(top, #7ec5e8, #1776a6);
   background: -ms-linear-gradient(top, #7ec5e8, #1776a6);
   background: -o-linear-gradient(top, #7ec5e8, #1776a6);
   padding: 2px 20px 3px 4px;
   -webkit-border-radius: 11px;
   -moz-border-radius: 11px;
   border-radius: 11px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #f7f7f7;
   font-size: 17px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.btnSaveBooking:hover {
   border-top-color: #000000;
   background: #7288c9;
   color: #ffffff;
   }
.btnSaveBooking:active {
   border-top-color: #3c637d;
   background: #3c637d;
   }

#save .btnImage
{
    background: url("../images/save.png") no-repeat scroll 2px 5px transparent !important;
    border-color: transparent !important;
    height: 24px;
    position: relative;
    width: 28px;
    margin: 1px 1px 1px 10px;
    padding: 4px 2px 0 20px;
}

#save .btnImage:hover
{
    background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
    cursor: pointer;
}

Answer 1

You just need to change where the text ‘:hover’ appears in your rule. As it stands, the img itself needs to be hovered. Change the rule so that when it’s parent is hovered it changes.

I.e

#save .btnImage:hover

becomes

.btnSaveBooking:hover .btnSaveBookingContainder .btnImage

This way, the image changes as the button’s background does. The answer already given gives you a ‘two-stage’ approach to the change.