css - 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 本身需要悬停。更改规则，以便当它的父级悬停时它会更改。

IE

#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:hovercss，并尝试使用以下样式格式，

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