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)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.