I am looking to achieve a specific hover effect where the white part does not darken when hovering over a certain element within its child elements.
Here is the HTML code I have:
<div className= {css.searchBarDiv}>
<div className={css.searchBarContent}/>
<div className={css.searchBarButton}>
<div className={css.button}>
<Image/>
</div>
</div>
</div>
And here is my attempt at the CSS code:
.searchBarDiv {
&:hover {
background-color: #e7e7e7;
}
&:focus-within {
background-color: #ffffff;
box-shadow: rgb(0 0 0 / 20%) 0px 6px 20px;
}
}
.searchBarButton {
flex: 0 0 auto;
margin-left: -6px;
padding-right: 9px;
align-self: center;
}
.button {
max-width: 200px;
animation-delay: 0.8s;
background-color: #ee3465;
color: #ffffff;
cursor: pointer;
&:hover {
text-decoration: none;
color: #ffffff;
background-color: #df3562;
}
}