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

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  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]

CodePudding user response：

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  src='https://svgshare.com/i/jLR.svg'> Button</a>
</body>

CodePudding user response：

change

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

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

CodePudding user response：

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

CodePudding user response：

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.