The issue is you should not leave space before :hover.

Before:
.mapbox :hover

After: .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>

Swapping the <div> and the <a> fixed it.

Instead of the <a> being inside the <div>, put the <div> inside the <a> and change the CSS hover class to the class.

You need to add !important for the background color to make it more specific to the browser.

The code should look this,

  .mapbox:hover  {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7289da !important;
  border-radius: 1vw;
  width: 12.5vw;
  height: 2vw;
  margin: auto;
  margin-bottom: 0.85vw;
}

I’m making a navbar and for each button, I have a <div> and a , the div is the box and the a is the text+hyperlink.

I want to have my div change colors when I hover it, the problem is if I add a div :hover to my CSS it only changes colors when I hover over the , and not the div. So the box only changes colors when I hover the text.

I’m also having to copy everything from my normal div to the hover div because if I only change the color only the text will. (the last image is what it looks like when my div hover has only a background-color property)
The red circles on the images are where my mouse is.

I hope it didn’t sound too confusing.
Code and example below:

(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;
}