Div Hover 仅在悬停文本时有效

Question

我正在制作一个导航栏，对于每个按钮，我有一个 <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: center;
    align-items: center;
    background-color: #424549;
    border-radius: 1vw;
    width: 12.5vw;
    height: 2vw;
    margin: auto;
    margin-bottom: 0.85vw;
    box-shadow: 0.225vw 0.225vw #1e2124;
}
.mapbox :hover{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7289da;
    border-radius: 1vw;
    width: 12.5vw;
    height: 2vw;
    margin: auto;
    margin-bottom: 0.85vw;
}

Answer 1

问题是你不应该在之前留出空间:hover。

前： .mapbox :hover

后：.mapbox:hover

.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: center;
  align-items: center;
  background-color: #424549;
  border-radius: 1vw;
  width: 12.5vw;
  height: 2vw;
  margin: auto;
  margin-bottom: 0.85vw;
  box-shadow: 0.225vw 0.225vw #1e2124;
}

.mapbox:hover {
  background-color: #7289da;
}

<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>