1

HTML：

<a href="" class="buttons_position"><img src="images/order.png" height="49" width="214"></a>

CSS：

.buttons_position {
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position a:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

ただし、ホバー時に画像は変更されません。CSSでこれを行う方法は？

4

4 に答える 4

3

IMGタグの画像を削除します。このように書いてください：

.buttons_position {
    background-image: url(images/order.png);
    background-repeat: no-repeat;
    display:block;
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);        
}

HTML

<a href="#" class="buttons_position"></a>

これをチェックしてくださいhttp://jsfiddle.net/X9wCL/

于 2012-06-13T10:52:35.443 に答える
3

背景画像はタグにホバーすると適用され、タグ内のimgで覆われます。imgタグを非表示にできるテキストに置き換え（画像置換を検索）、タグのデフォルトおよびホバーステータスに別の背景を適用します。1つの画像（スプライト）を背景として使用し、ホバー時にbackground-positionを使用すると便利です。

画像の置換：http ：//css-tricks.com/css-image-replacement/

背景画像のスプライト： http： //nicolasgallagher.com/css-background-image-hacks/

他の答えを見ると、正しい方法は次のようになります。

.buttons_position {
    background-image: url(images/order.png);
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

display: block;幅/高さの属性を次のように設定する必要がある場合もあります.buttons_position

于 2012-06-13T10:52:44.557 に答える
1

試してください：HTML：

<a href="" class="buttons_position"></a>

CSS：

.buttons_position {
    padding: 0 0 0 10px;
    background-image: url(images/order.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    border: 0px;
    margin: 0px;
}
.buttons_position a:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}
于 2012-06-13T10:52:35.720 に答える
0

そのはず：

a.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

リンクがクラス.button_positionの要素内にありません

于 2012-06-13T10:57:54.407 に答える