0
191
ViewsHow do I disable hover effect for a particular element inside a div?
I want to create this hover effect:
Basically, stop the white part from darkening when a particular element from its child elements is being hovered on.
Here's my HTML code:
<div className= {css.searchBarDiv}>
<div className={css.searchBarContent}/>
<div className={css.searchBarButton}>
<div className={css.button}>
<Image/>
</div>
</div>
</div>
Here's 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;
}
}
3 answers
Answer question0
Use custom CSS classes for those childs to have hover in them.
.searchBarDiv {
.customClass{
&:hover{ //bla bla bla}
}
}
0
As per you need, you need the hover effect of in the background which should not cover over the button. so what i would recommend is moving the hover property from .searchBarDiv to .searchBarContent. and for the button make it position absolute and increase the z-index of button as it will not get affected by the hover change in .searchBarContent. use searchBarDiv as only a wrapper of the custom search field you are creating.
0
use classnames package or clsx to combine your classes for better ux. It is widely accepted solution. If your project does not permit to use extra packages try to condition you classes however you feel like either functions or inline conditionals to choose correct classes when some state on hover is true. on a cheerful note listen to https://www.youtube.com/watch?v=0yXJ4t6Ax1U