Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

ロールオーバーの時に背景画像のちらつき無くす

Dev

ボタンに背景画像を指定した時、ロールオーバー時のちらつきを無くす | js.doit

default 画像、hover 画像を入れたスプライト画像作って、background-position で各画像を指定する。

button {
  border: none;
  background-image: url(http://jsrun.it/assets/1/j/Y/0/1jY0e.png);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 0 0;
  cursor: pointer;
  height: 80px;
  width: 370px;
}

button:hover {
  background-position: 0 -80px;
}

他にこんな方法があった