Html 设置带有悬停状态背景更改的链接样式

我正在尝试设置一些子类别链接的样式，以便整个背景充当链接，当鼠标悬停时，将黄色背景上的黑色文本转换为黑色背景上的白色文本

网站

h2.product-name 2{
背景色：#FFE51E；
边界半径：10px；
高度：80px；
线高：80px；
文本对齐：居中；
颜色：#000；
}
.产品名称2：悬停{
背景色：#000；
边界半径：10px；
高度：80px；
线高：80px；
文本对齐：居中；
颜色：#fff；
显示：块；
}

---

试试看，这似乎可以在检查时发挥作用：

h2.product-name2 a {
   display: block;
}

我写了一篇简短的文章来突出我在你所问的网站上看到的动态变化，我会在接下来的过程中详细说明，所以请随时提问

HTML

---

当整个背景悬停时，瞄准你的锚。

h2.产品名称2：悬停a{
颜色：白色；
}

h2.product-name 2{
背景色：#FFE51E；
边界半径：10px；
高度：80px；
线高：80px；
文本对齐：居中；
}
.产品名称2：悬停{
背景色：#000；
边界半径：10px；
高度：80px；
线高：80px；
文本对齐：居中；
显示：块；
}
h2.2产品名称2 a{
显示：块；
颜色：#000；
文字装饰：无；
}
h2.产品名称2：悬停a{
颜色：#fff；
}

你能发布一些相关的css吗？目前，在悬停状态下，文本充当链接，我更希望整个框成为链接。此外，文本颜色会变为黑色，除非您将鼠标悬停在它上面，这会使它看起来好像文本已消失。为什么您要使用javascript而不是CSS伪选择器

：hover

？感谢您指出这一点，我最近在jQuery上工作的时间有点太长了，这些小事情！

<div>
    section 1
</div>
<div>
    section 2
</div>
<div>
    section 3
</div>
<div>
    section 4
</div>
<div>
    section 5
</div>

div {
    display: inline-block;
    background-color: yellow;
    width: 100px;
    height: 60px;
    text-align: center;
    font-size: 16px;
    line-height: 60px;
    margin: 2px 0;
}

div:hover {
    background-color: black;
    color: white;
}