Pranav Pranav - 1 year ago 51
HTML Question

Hover over a div should change the background color but does not cover whole div?

For my school project i would like to achieve

  • if the user hovers his mouse pointer over a table the bgcolor of the cell should change

I tried

  • changing the display of anchor to block and changing the cellpadding and tweaking a few things here and there.

My Problem is

  • the cell-background changes on mouse over but it does not cover the ENTIRE cell (there are still gaps left on all the four sides where it shows differernt color)

  • i think there are many easy ways to fix this and i sort of combine them all and do something silly which makes it all go wrong.

Any simple fixes?

P.S : i know the table tags are deprecated but i struggle to make rows and columns any other way. I find the other ways very tough. The table tag would not be causing it now, or would it? Also it is just a basic framework so no links have an url nor are there any proper colors.


<div id = "heading"> EARTH HOUR </div>
<table style=width:100% cellpadding=7>
<td width=25% align=center bgcolor=blue><a href="">AIM</a></td>
<td width=25% align=center bgcolor=blue><a href="">ACHIEVEMENTS</a></td>
<td width=25% align=center bgcolor=blue><a href="">YOUR HELP</a></td>
<td width=25% align=center bgcolor=blue><a href="">FAQ'S</a></td>
<center><img src="earth.jpg"


#heading {
background-image:url("images.jpg"); color:#00FF00;
margin:-8px -8px 0px -8px;

table, tr, td {
border: 3px solid red;
color: white;
font-size:110%; font-weight:bold;

html, body { margin: 0; padding: 0; }
html { height: 100% }
body { min-height: 100% }

#text { font-size:150%; margin:7px; }

a { display:block;}
a:hover{ background-color:red; }


Answer Source

The reason is most likely that the hover is set on the link tag a and not on the td tag; therefore you still see a minor gap between the <a> and the surrounding <td>

See this example on

I changed this:

table, tr, td {
     padding: 0;

td:hover { background-color: red; }
 a:hover { background-color: red; } <-- removed