将鼠标悬停在链接旁边的链接显示图像上时

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

另一种选择是使用不同的图像并在此之间进行更改。

Answer 2

您可以使用一点CSS技巧从div使用它的边框制作箭头，然后在用户:hover购物车时显示。将黑色矩形悬停在此example。

中