Html CSS：悬停会添加不需要的额外空白

我只是尝试创建一个悬停，因此它将悬停在整个部分上，如下所示：

然而，每次我在我的产品上徘徊。 这种情况反而发生了

它为下面的部分添加了额外的空白，并且没有正确地覆盖该部分

我已经试过了。

• 更改线高度
• 添加新的节/div
• 填充0，边距0

div#cat{
/*线高：30%；
高度：50px*/
宽度：61%；
左边缘：39%；
高度：15px；
线高：50%
}
/*产品区域翻转/悬停*/
猫：悬停{
背景色：#e86065；
不透明度：0.5；
过滤器：α（不透明度=50）；
背景位置：100%100%；
身高：80%；
}

---

当CSS更改为悬停状态时，它会增加额外的高度。在添加悬停样式时，请确保只更改要更改的属性-在这种情况下，您不希望更改高度

你想要这样的东西：

div#cat{
宽度：61%；
左边缘：39%；
高度：15px；
线高：50%
}
/*产品区域翻转/悬停*/
猫：悬停{
背景色：#e86065；
不透明度：0.5；
过滤器：α（不透明度=50）；
背景位置：100%100%；
宽度：61%；
左边缘：39%；
高度：15px；
线高：50%
}

ArtOfCode为您的问题提供了正确的解决方案

但是，使用表进行格式设置不是一个好主意。当单元格有边框时，您可以看到表格填充（我已经完成了）。表格带来了许多格式问题

我建议您改用div，并学习使用和/或所需的三到四件事

表{边框折叠：折叠；}
td{border:1px solid#ccc；padding:0；}
小分队{
/*线高：30%；
高度：50px*/
宽度：61%；
左边缘：39%；
高度：15px；
线高：50%
}
/*产品区域翻转/悬停*/
猫：悬停{
背景色：#e86065；
不透明度：0.5；
过滤器：α（不透明度=50）；
背景位置：100%100%；
身高：80%；
}

谢谢。这确实超出了额外的空间，但现在悬停只有一行，是否有任何方法可以克服这一点？因此，您正在循环中添加重复id，从而导致无效HTML

id='prods\u nme'

和