Question 44605 in Html Question posted in
Some basic documentation can be found here.

Hover in a button not changing background-color – Html

I have two problems, but the main one is that the hover I am doing on a button changes the color of the text but does not change the background color and I do not understand how to fix it.

The second problem is that I have had to put its own background and it does not look good, but if not directly I do not catch the background of the normal aside (I do not know if there is some way to fix this so that it uses the same background).

aside {
  font-family: Anderson;
  width: 15%;
  background: rgb(106, 36, 108);
  background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-image: url(../Imagenes/Logo.png);
  background-size: 80%;
  background-position: top;
  background-position-y: 10px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

aside a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
}

aside a:hover {
  background-color: #ddd;
  color: black;
}

aside a.active {
  color: white;
  text-decoration: dotted;
  background: rgb(106, 36, 108);
}

aside button {
  font-family: Anderson;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
  background: rgb(106, 36, 108);
  background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  border-style: none;
  cursor: pointer;
}

aside button:hover {
  color: black;
  background-color: #ddd !important;
}
<aside>
  <p></p>
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="Formulario.html"><i class="fa fa-wpforms"></i>&nbsp;&nbsp;Account</a>
  <button class="btn-toggle"><i class="fa fa-fw fa-home darkmode"></i> Light Mode</button>
  <a href="#"><i class="fa fa-fw fa-home"></i> About us</a>
</aside>
Tags:

2

Answers


  1. 0

    The problem with your button is that you defined its normal state using background: and the hover state using background-color: — they do not match.

    If you switch it to: aside button:hover {background: #ddd} it will fix the problem and you also will not need the !important.

    Login or Signup to reply.
  2. 0

    The "normal" style is this:

    background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);

    The hover style is this:

    background-color: #ddd !important;

    The background shorthand property lets you set a selection of different background-something properties at once.

    linear-gradients are background-images, and background-images are rendered over the top of background-colors.

    So your hover style is being applied, but you can’t see it because it is covered up by the gradient.

    Change the hover style to:

    background: #ddd;

    This will set the background-color to #ddd and the background-image to none so you’ll be able to see the background-color.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search