Question

对于我想学习的学校项目

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

我试过

将锚点的显示更改为阻止并更改cellpadding并在此处调整一些内容。

我的问题是

鼠标悬停时细胞背景会发生变化，但它不会覆盖整个细胞（所有四边都有空隙，显示颜色不同）
我认为有很多简单的方法可以解决这个问题，我将它们结合起来并做一些愚蠢的事情，这样就会出错。

任何简单的修复？

P.S：我知道表标签已弃用，但我很难以任何其他方式创建行和列。我发现其他方面非常艰难。表标签现在不会导致它，或者它会吗？它也只是一个基本框架，所以没有链接有一个网址，也没有任何正确的颜色。

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

原因很可能是悬停是在链接标记a上设置的，而不是在td标记上设置的;因此，您仍会看到<a>与周围<td>

之间存在细微差距

请参阅此example on codepen.io

我改变了这个：

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

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

Answer 2

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

布局表格一般难以使用，看起来你正在体验第一手资料！

将鼠标悬停在div上应更改背景颜色但不包括整个div？

2 个答案: