Div Hover only works when hovering text-CodePudding

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 >
            <div ><a  href="">Erangel</a><br></div>
            <div ><a  href="">Miramar</a><br></div>
            <div ><a  href="">Sanhok</a><br></div>
            <div ><a  href="">Vikendi</a><br></div>
            <div ><a  href="">Taego</a><br></div>
            <div ><a  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;
}

CodePudding user response：

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 >
  <div ><a  href="#">Erangel</a><br></div>
  <div ><a  href="#">Miramar</a><br></div>
  <div ><a  href="#">Sanhok</a><br></div>
  <div ><a  href="#">Vikendi</a><br></div>
  <div ><a  href="#">Taego</a><br></div>
  <div ><a  href="#">Karakin</a></div>
</div>

CodePudding user response：

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.

CodePudding user response：

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