css，将鼠标悬停在特定元素上时更改其他元素的背景？答案

【问题标题】：css, change other element's background when hovering over a particular element?css，将鼠标悬停在特定元素上时更改其他元素的背景？
【发布时间】：2012-10-01 16:47:15
【问题描述】：

好的，首先是代码..

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

【问题讨论】：

标签： css hover css-selectors

【解决方案1】：

从您现有的 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 */
}

【讨论】：

【解决方案2】：

您只需要更改文本 ':hover' 在规则中的显示位置。就目前而言，img 本身需要悬停。更改规则，以便在其父项悬停时更改。

即

#save .btnImage:hover

变成

.btnSaveBooking:hover .btnSaveBookingContainder .btnImage

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

【讨论】：

不，这行不通。通过应用.btnSaveBooking:hover .btnSaveBookingContainder .btnImage 改变了btnSaveBooking div 的背景，而不是span 的图像。因此，它会在悬停时创建一个新图像，该图像与 span 中包含的图像不同
@Razort4x - 错误。它是具有白色边框的输入元素。在悬停之前和悬停期间都有一张图像。

【解决方案3】：

请试试这个：

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

【讨论】：