html - リンクにカーソルを合わせると、リンクの横に画像が表示されます

Question

通常、赤い矢印が表示されないようにします。しかし、ユーザーが「マイ カート (0)」の上にマウスを置くと、赤い矢印が表示されます。どうすればhtml/cssでこれを行うことができますか?

Answer 1

これを試すことができます：http://jsfiddle.net/ePf3A/

これが行うことは、画像の幅を変更して矢印を表示/非表示にすることです。

.cart {
  background:url(http://i.stack.imgur.com/D2o7H.png);
  width: 100px;
  height: 45px;
  display: block;
}
.cart:hover {
  width: 150px;
}
​

もう 1 つのオプションは、別の画像を使用して、その間で変更することです。

Answer 2

ちょっとした CSS トリックを使用して、境界線を使用して div から矢印を作成し、ユーザー:hoverがカートに入れたときにそれを表示できます。この例の黒い四角形にカーソルを合わせます。