css，当悬停在特定元素上时更改其他元素的背景？

Question

首先是代码..

<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>

图片

正常
OnMouseOver 位于按钮
OnMouseOver at imaage

正如您所看到的，当用户将完全悬停在图像上时，只有是图像更改的背景，我想要的是，当用户甚至将鼠标悬停在此按钮上时，图像应该会发生变化。

这是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

您只需更改规则中出现文字'：hover'的位置即可。就目前而言，img本身需要徘徊。更改规则，以便当它的父项被悬停时，它会发生变化。

即

#save .btnImage:hover

变为

.btnSaveBooking:hover .btnSaveBookingContainder .btnImage

这样，图像会随着按钮的背景而改变。已经给出的答案为您提供了“两阶段”的变革方法。

Answer 2

请试试这个：

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

Answer 3

从现有的css中删除#save .btnImage:hover css，然后尝试使用以下样式格式，

.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 */
}