background-color property not working with hover selector

Question

I have div with id "inst" which contains two buttons. I have applied background-color and font-weight property with hover selector on buttons. But, when I hover over the button, font-weight property works but background-color doesn't.

My code of my div "inst" is:

<div id="inst">
    <h1>Login or Signup</h1>
    <p>
        Please login or sign up to continue...
        <br>
        <button onclick="window.location.href='/Server/login.php?redirect=<?= $uri ?>'" style="background-color: black; color: white;">Login</button>
        <br>
        <button onclick="window.location.href='/Server/signup.php?redirect=<?= $uri ?>'" style="background-color: white; color: black;">Sign Up</button>
    </p>
</div>

My CSS is:

#inst {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    border: 2px solid #000;
    background-color: #fff;
    text-align: center;
}
#inst button {
    font-size: 45px;
    width: 400px;
    border: 2px solid #000;
    margin: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
#inst button:hover {
    font-weight: bold;
    background-color: red;
}

score 1 · Accepted Answer · answered Aug 08 '20 at 07:59

Because you're using inline style background color. You can't override it without using !important. Learn CSS Specificity

#inst {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  border: 2px solid #000;
  background-color: #fff;
  text-align: center;
}

#inst button {
  font-size: 45px;
  width: 400px;
  border: 2px solid #000;
  margin: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#inst button:hover {
  font-weight: bold;
  background-color: red !important;
}

<div id="inst">
  <h1>Login or Signup</h1>
  <p>
    Please login or sign up to continue...
    <br>
    <button onclick="window.location.href='/Server/login.php?redirect=<?= $uri ?>'" style="background-color: black; color: white;">Login</button>
    <br>
    <button onclick="window.location.href='/Server/signup.php?redirect=<?= $uri ?>'" style="background-color: white; color: black;">Sign Up</button>
  </p>
</div>

background-color property not working with hover selector

1 Answers1