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>