Question

I have to create a hovering effect wherein when a tab is hovered the entire background of the tab should be White. But as can be seen in below SS, , hovering affect is getting applied only to the text part.

I have also attached the CSS from Chrome Web developer.

HTML code generating that tab is ,

<li>
  <a class="last_menu" href="#"></a>
</li>

I have tried adjusting with padding element. But, text is also moving with it. I want text to be at center and only hovering to be expanded to occupy whole tab space.

Answer 1

Install Web Developer Toolbar Go to CSS > Display Style Information or <ALT+SHIFT+Y>(it’s the wand in the toolbar). Hover your mouse over the element in question to get a detailed picture of how it’s being rendered. Study this. Make it your friend.