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 在图片上

如您所见，当用户将鼠标悬停在图像上时，只有图像的背景发生变化，我想要的是，当用户将鼠标悬停在该按钮上时，图像应该发生变化。

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

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