CODEWITHSUNDEEP
csshover
shin
shin

Reputation: 32721

How to display a background image with a:hover

http://jsfiddle.net/gUckp/

In the above demo, I'd like to show an orange round image BELOW the center of menu item when it is hovered.

However I am not able to show all the image. The bottom is cut.

How can I do it with CSS?

Thanks in advance.

Upvotes: 1

Views: 371

Answers (3)

NGLN
NGLN

Reputation: 43649

background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%;

See the updated jsfiddle.

Edit: O sorry, that's not what you asked for. Will try again... ;)

Edit 2: Hereby the correct one.

Edit 3: Or this one with a nicer focusrect size. Enjoy!

Upvotes: 0

Syri
Syri

Reputation: 671

Your a tag needs a block specification.

See: http://jsfiddle.net/gUckp/16/.

Note the line display: inline-block; for the #nav a class.

The reason for the image not displaying correctly in your sample is because it was being placed outside of the a tag rendered block size.

EDIT

Firebug helps tremendously in resolving these types of issues. It allows you to inspect elements etc. I'd suggest adding it to your development toolkit.

Upvotes: 2

Johannes P.
Johannes P.

Reputation: 4123

When using display:inline; on the li items, the height attribute you've given is ignored. Put the :hover on the li items istead of the a tags and it works. The height and line-height you've used becomes superfluous.

Updated jsfiddle

Upvotes: 2

Related Questions