0

画像ボタンを押している最中は押し込み中の画像を表示したいです。

以下のようにすることでうまくいかないかと思ったのですが
ボタン画像は表示されるものの、ボタンを押しても画像は変化しませんでした。
「active」の使い方が誤っているのでしょうか?

◆HTML

<button class="btn-test" type="button"></button>

◆CSS

.btn-test {
    background-image : url('../assets/normal_off.png');★押し込み前の画像
    width: 60%;
    height: 12%;
}
.btn-test:active {
    background-image : url('../assets/normal_on.png');★押し込み中の画像
}

1 件の回答 1

0

問題なく動きますが?

.btn-test {
    background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAIAAAA21aCOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVChTY3gro0IMGlWHHQ1udTIqAHuwt22ZWxTRAAAAAElFTkSuQmCC);
    width: 100px;
    height: 100px;
}
.btn-test:active {
    background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAIAAAA21aCOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAcSURBVChTY7T3OMNABGCC0oTAqDrsYGDUMTAAAJDrAWtzjyJsAAAAAElFTkSuQmCC);
}
<button class="btn-test" type="button"></button>

1
  • ありがとうございます。どうやらキャッシュが残っていたのか、クリアすると無事に表示可能でした。
    – kanko
    Commented 2017年11月17日 4:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。