Hola qué tal amigos de la comunidad tengo un problema con mi código, quiero hacer algo en SASS pero realmente nose si se pueda ya que en CSS si lo puedo hacer pero en SASS por más que busco no encuentro cómo hacerlo.
Al pasar el cursor sobre el icono del menú quiero que el color del fondo cambie a un color rojo por ejemplo, pero no logro hacerlo.
Solo para aclarar y no confundirlos, quiero cambiar el fondo de otro contenedor, más no del propio botón de menú, en este caso el otro contenedor es id=#sideNav
.
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background: #009688;
z-index: 2;
nav{
margin: 0px;
padding: 3px;
a{
text-decoration: none;
color: white;
display: block;
padding: 5px;
margin: 10px 20px 40px 20px;
}
}
}
#menuBtn{
text-align: center;
position: fixed;
right: 1%;
top: 15px;
border-radius: 3px;
z-index: 3;;
cursor: pointer;
font-size: 2rem;
margin-right: 1.5rem;
margin-top: -0.5rem;
color: #fff;
i{
/*aqui es donde intento cambiar el color, al momento de pasar el mouse sobre el menu*/
&:hover #sideNav{
background: #000;
}
}
}
<section id="banner">
<img src="./img/logo.png" class="logo" alt="">
<div class="bannert-text">
<h1>Hair Studio</h1>
<p>Style Your Hair Is Style Your Life</p>
<div class="banner-btn">
<a href="#" class=""><span></span>Find Out</a>
<a href="#" class=""><span></span>Read More</a>
</div>
</div>
</section>
<div id="sideNav">
<nav>
<a href="#">HOME</a>
<a href="#">FEATURES</a>
<a href="#">SERVICES</a>
<a href="#">TESTIMONIALS</a>
<a href="#">MEET US</a>
</nav>
</div>
<div id="menuBtn"><i class="fas fa-bars"></i></div>