0
193
Vistas¿Cómo desactivo el efecto de desplazamiento para un elemento en particular dentro de un div?
Quiero crear este efecto de desplazamiento:
Básicamente, evita que la parte blanca se oscurezca cuando se pasa el cursor sobre un elemento particular de sus elementos secundarios.
Aquí está mi código HTML:
<div className= {css.searchBarDiv}> <div className={css.searchBarContent}/> <div className={css.searchBarButton}> <div className={css.button}> <Image/> </div> </div> </div>Aquí está mi intento en el código CSS:
.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 Respuestas
Responde la pregunta0
Use clases de CSS personalizadas para que esos niños tengan el cursor sobre ellos.
.searchBarDiv { .customClass{ &:hover{ //bla bla bla} } }0
Según lo que necesite, necesita el efecto de desplazamiento en el fondo que no debe cubrir el botón. entonces, lo que recomendaría es mover la propiedad flotante de .searchBarDiv a .searchBarContent. y para el botón, haga que su posición sea absoluta y aumente el índice z del botón, ya que no se verá afectado por el cambio de desplazamiento en .searchBarContent. use searchBarDiv solo como un envoltorio del campo de búsqueda personalizado que está creando.
0
use el paquete classnames o clsx para combinar sus clases para una mejor experiencia de usuario. Es una solución ampliamente aceptada. Si su proyecto no permite el uso de paquetes adicionales, intente condicionar sus clases, sin embargo, le gustaría que las funciones o los condicionales en línea elijan las clases correctas cuando algún estado al pasar el mouse sea verdadero. en una nota alegre escucha https://www.youtube.com/watch?v=0yXJ4t6Ax1U