Quiero mostrar el botón __ cuando pase el mouse sobre la imagen __. Pero en este momento, el botón tiene su propio desplazamiento. Debería hacer esto: cuando se active el desplazamiento desde __image, aumente la opacidad del botón __ para que sea visible.
¡Gracias por cualquier ayuda!
&__image { display:grid &:hover { transition: 1s; transform: scale(1.05); } } &__button { opacity: 0; display: grid; &:hover { opacity: 1; } }Ah, encontré una solución.
&__image { display:grid &:hover { transition: 1s; transform: scale(1.05); .button { opacity: 1; } } } &__button { opacity: 0; display: grid; }Y luego en js: className="item__music button item__button"
Si este es el diseño de su HTML
<div class="item"> <div class="__image" style="height:200px;width: 200px;background-color:red;margin:20px"></div> <div class="__button" style="height:200px;width: 200px;background-color:red;margin:20px"></div> </div>Entonces este estilo debería hacerlo:
.item { .__image { display: grid; &:hover { cursor: pointer; transition: 1s; transform: scale(1.05); + .__button { opacity: 1; } } } .__button { opacity: 0; display: grid; &:hover { opacity: 1; } } }