将鼠标悬停在 div 上应该会更改背景颜色但不会覆盖整个 div？

Question

对于我的学校项目，我想实现

如果用户将鼠标指针悬停在 table 上，单元格的 bgcolor 应该改变

我试过了

更改锚点的显示以阻止并更改 cellpadding 并在这里和那里调整一些东西。

我的问题是

单元格背景在鼠标悬停时发生变化，但它没有覆盖整个单元格（在显示不同颜色的所有四个边上仍然留有间隙）
我认为有很多简单的方法可以解决这个问题，我将它们全部结合起来，做了一些愚蠢的事情，这让一切都出错了。

任何简单的修复？

P.S ：我知道 table 标签已被弃用，但我很难以任何其他方式制作行和列。我发现其他方式非常艰难。 table 标签现在不会引起它，或者会吗？此外，它只是一个基本框架，因此没有链接有 url，也没有任何合适的颜色。

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 1

你真的应该使用 <nav> 和 <ul> 元素而不是 table 方法。查看 w3 schools html layout。

用于布局的表格通常很难使用，您似乎亲身体验过！

Answer 2

原因很可能是悬停设置在link标签a上，而不是td标签上；因此，您仍然会看到 <a> 和周围的 <td>

之间存在微小差距

看到这个example on codepen.io

我改变了这个：

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

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

将鼠标悬停在 div 上应该会更改背景颜色但不会覆盖整个 div？

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

html

anchor

hover