小编mar*_*uan的帖子

我正在制作一个导航栏，对于每个按钮，我有一个 <div> 和 a ， div 是框， a 是文本+超链接。

我想让我的 div 在悬停时改变颜色，问题是如果我添加一个 div :hover 到我的 CSS 中，它只会在我悬停在 上时改变颜色，而不是 div 上。因此，当我将鼠标悬停在文本上时，该框只会改变颜色。

我还必须将所有内容从普通 div 复制到悬停 div，因为如果我只更改颜色，则只有文本会更改。（最后一张图片是当我的 div 悬停只有背景颜色属性时的样子）图像上的红色圆圈是我的鼠标所在的位置。

我希望这听起来不会太令人困惑。代码及示例如下：

(this is inside a <nav>)

<div class="menu">
            <div class="mapbox"><a class="map" href="">Erangel</a><br></div>
            <div class="mapbox"><a class="map" href="">Miramar</a><br></div>
            <div class="mapbox"><a class="map" href="">Sanhok</a><br></div>
            <div class="mapbox"><a class="map" href="">Vikendi</a><br></div>
            <div class="mapbox"><a class="map" href="">Taego</a><br></div>
            <div class="mapbox"><a class="map" href="">Karakin</a></div>
</div>

.map{
    font-family: 'Rubik Mono One', Arial;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    text-shadow: 0.125vw 0.125vw #282b30;
}
.mapbox{
    display: flex;
    justify-content: …