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

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

Answer 2

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