0

さて、最初にコード..

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

3 に答える 3

1

ルール内で「:hover」というテキストが表示される場所を変更するだけです。現状では、img 自体をホバーする必要があります。親がホバーされると変更されるようにルールを変更します。

いえ

#save .btnImage:hover

になる

.btnSaveBooking:hover .btnSaveBookingContainder .btnImage

このように、ボタンの背景と同じように画像が変化します。すでに与えられた答えは、変更への「2 段階」アプローチを提供します。

于 2012-10-11T06:11:00.100 に答える
0

#save .btnImage:hover既存の CSS から 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 */
}
于 2012-10-12T06:56:18.413 に答える
0

これを試してください：

.btnSaveBookingContainder:hover .btnImage
{
    background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
    cursor:pointer;
    width:28px;
    height:31px;
}
于 2012-10-11T06:06:19.583 に答える