css, change other element's background when hovering over a particular element? - css

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.

Answer 2

Please try this:
.btnSaveBookingContainder:hover .btnImage
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor:pointer;
width:28px;
height:31px;
}

Answer 3

remove the #save .btnImage:hover css from your existing css, and try with the following style format,
.btnSaveBooking:hover{
/* over border, background & text color */
}
.btnSaveBooking:active
{
/* active border, background & text color */
}
.btnSaveBooking:hover #save .btnImage{
/* provide your hover image style */
}
.btnSaveBooking:active #save .btnImage{
/* provide your active image style */
}