CODEWITHSUNDEEP
htmlcss
anc1revv
anc1revv

Reputation: 1613

When hovering over link display image next to link

Normally, i want the red arrow to not display. But when a user hovers their mouse over "My Cart (0)" I want the red arrow to display. how can u do this with html/css?

enter image description here

Upvotes: 1

Views: 992

Answers (2)

Scillon
Scillon

Reputation: 320

You can use a little CSS trick to make an arrow from a div using it's borders, then show it when a user :hover your cart. Hover the black rectangle in this example.

Upvotes: 0

samura
samura

Reputation: 4395

you can try this: http://jsfiddle.net/ePf3A/

What this does is change the width of the image to show/hide the arrow.

.cart {
  background:url(https://i.sstatic.net/D2o7H.png);
  width: 100px;
  height: 45px;
  display: block;
}
.cart:hover {
  width: 150px;
}
​

The other option is use a different image and change between then.

Upvotes: 2

Related Questions