Issue

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]

Solution

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>

Answered By - IT goldman

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Friday, July 29, 2022

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

Issue

Solution

No comments:

Post a Comment