Pranav Pranav - 6 months ago 13
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.

HTML:

<div id = "heading"> EARTH HOUR </div>
<table style=width:100% cellpadding=7>
<tr>
<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>
</tr>
</table>
<center><img src="earth.jpg"
style="width:300px;height:280px;position:relative;top:25px;">
</center>


CSS:

#heading {
padding:8px;
text-align:center;
background-image:url("images.jpg"); color:#00FF00;
font-size:300%;
margin:-8px -8px 0px -8px;
font-weight:bold;
}

table, tr, td {
border-collapse:collapse;
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; }


</style>

Answer

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 codepen.io

I changed this:

table, tr, td {
     ...
     padding: 0;
}

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