0

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>

2 respuestas 2

1

He estado mirando y la verdad no estoy seguro de entender cual es el comportamiento deseado.

Hola que tal, realmente no es lo que deseo hacer, ese hover lo aplicaste directamente al #menuBtn, lo que estoy intentando hacer es que al pasar el cursor sobre el icono que lo contiene la etiqueta i, que cambie de color el fondo del #menuBtn

En este caso, no entiendo entonces porque en el código, usas el elemento #sideNav como selector.

En caso que quieras que el elemento #sideNav cambie su color de fondo al hacer hover en el elemento i que reposa dentro de #menuBtn:

Tendrías un problema de precedencia en la cascada de CSS, ya que los selectores no permiten actuar sobre elementos predecesores en el código, solo sucesores. Sin embargo se puede solucionar fácilmente al cambiar el orden de los contenedores de la siguiente manera:

HTML

<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>

    <!-- Cambio de orden, ahora `#menuBtn` precede a `#sideNav` -->
    <div id="menuBtn"></i>icono</i></div>
    <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>

SCSS

#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;

  &:hover + div  {
      background: #000;
  }
}

Si por lo contrario quieres afectar al elemento #sideNav, ten en cuenta que las reglas en SASS/SCSS pueden ser anidadas siempre que los elementos HTML también estén anidados, en este caso tu cogido esta anidando reglas del elemento #menuBtn dentro de un elemento hermano, considero que no funcionara.

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

Hola qué tal amigos de la comunidad tengo un problema con mi código, quiero hacer algo en SASS pero realmente no se si se pueda ya que en CSS si lo puedo hacer pero en SASS por más que busco no encuentro cómo hacerlo.

En este caso, si puedes compartir el código CSS me ayudaría bastante para saber exactamente cual es el resultado que esperas, en cualquier caso, espero poder seguir ayudándote.

Un saludo.

0

#sideNav{
    width: 250px;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    background: #009688;
    z-index: 2;
}
#sideNav .nav{
        margin: 0px;
        padding: 3px;
    }
#sideNav .nav 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;
}
#menuBtn i{
        /*aqui es donde intento cambiar el color, al momento de pasar el mouse sobre el menu*/
    
    }
#menuBtn i:hover{
            background: #000;
                }
#sideNav:hover{
width: 500px;
height: 200vh;
}
<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">2wefewwefweffewqwqef</i></div>

1
  • Hola que tal, realmente no es lo que deseo hacer, ese hover lo aplicaste directamente al #menuBtn, lo que estoy intentando hacer es que al pasar el cursor sobre el icono que lo contiene la etiqueta i, que cambie de color el fondo del #menuBtn.
    – VALNET VLN
    el 24 oct. 2020 a las 4:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.