How to change a color of text and icon within a button whilst hovering over the button?

user_17736785 0
Viewed 46

So far, the code below changes the color of the text and the background whilst hovering. However, the icon will only change while the cursor is hovering over the img. I would like both img and text to change while I hover anywhere in the box.

If this is possible your help will be massively apreciated!

Code I use:

HTML
<body>
<a href="#" class='menu-button'>
  <img class="menu-icon" src='https://svgshare.com/i/jLR.svg'> Button</a>
</body>

CSS
.menu-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2em;
  height: 21px;
  color: #72767A;
  text-decoration: none;
}

.menu-button {
  transition: 0.2s linear;
}

.menu-button:hover {
  background-color: #ffc047;
  border-radius: 8px;
  cursor: pointer;
}

a.menu-button:hover {
  color: #fff;
}

img.menu-icon:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

https://codepen.io/harrync92/pen/dymWqoB?editors=1100 [Codepen link for you to play]

hover button css image html
4 Answers

Make the inner element be affected by the :hover of the parent like this:

(I have also added transition to the filter, and generally improved the colors)

body {
  background: #111;
}

.menu-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 20%;
  padding: 2em;
  height: 21px;
  gap: 20px;
  color: white;
  text-decoration: none;
  border: 2px solid white;
  font-size: 20px;
}

img {
  width: 40px;
  height: 40px;
}

.menu-button {
  transition: 0.2s linear;
}

.menu-button:hover {
  background-color: #ffc047;
  border-radius: 8px;
  cursor: pointer;
  color: black;
}

img.menu-icon {
  transition: 0.2s linear;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.menu-button:hover img.menu-icon {
  filter: none;
}
<body>
  <a href="#" class='menu-button'>
    <img class="menu-icon" src='https://svgshare.com/i/jLR.svg'> Button</a>
</body>

user_38073650

change

img.menu-icon:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

to

.menu-button:hover img.menu-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg)
    brightness(102%) contrast(102%);
}
user_141712560

I think it might be a case of the ordering of your last class.

Try this:

.menu-button:hover .menu-icon {
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
user_88367860

You can just add

.menu-button:hover img{
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

to your code and it will work just fine.

Here this code indicates that when you will hover on the .menu-button class, the color of the img will change.

user_195419630
Related