2

Tengo una página html dividida en secciones. A su vez tengo un menú con las diferentes secciones, de modo que si pinchas en un elemento del menú te lleva a la sección correspondiente. Quiero que según el usuario vaya pasando por las diferentes secciones, éstas se vayan resaltando o poniendo en negrita en el menú. Este es el código del menú:

<div class="menu-lateral">
    <div class="contenido-menu-lateral">
        <a href="#detalles" class="ele-menu"><span class="iconosml"><i class="fas fa-info"></i></span>Detalles</a>
        <a href="#datostecnicos" class="ele-menu"><span class="iconosml"><i class="fas fa-stream"></i></span>Datos técnicos</a>
        <a href="#grafico" class="ele-menu"><span class="iconosml"><i class="fas fa-chart-line"></i></span>Gráfico</a>
    </div>
</div>

Y aquí dejo el ejemplo con dos secciones:

<div class="contenido">
    <section id="detalles" class="compartimento">
        <h2>Detalles</h2>
        <p> Aquí van los detalles</p>
    </section>
    <section id="datostecnicos" class="compartimento">
        <h2>Datos técnicos</h2>
        <p>Aquí indicadores técnicos</p>
    </section>
</div>
1
  • Creo que la mejor forma es usar la API Intersection Observer para analizar cuando un elemento está visible en viewport y aplicar los cambios necesarios en los enlaces.
    – Triby
    Commented el 30 nov. 2021 a las 16:15

3 respuestas 3

1

La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).

/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */
a:hover {
  /*Lo pone en negrita*/
  font-weight: bold;
}
-1

Para resaltar un elemento a que ya haya sido visitado, puedes agregar una pseudo clase :visited en tu caso seria (en la hoja de estilos):

.ele-menu:visited{
color: red;
}

En este ejemplo, al visitar el elemento a el texto de este, cambiara a color rojo. Espero haya respondido tu pregunta.

1
  • Pero yo no quiero que cambie de color cuando el usuario haya pinchado en él, quiero que cambie de color conforme el usuario esté viendo esa sección Commented el 1 dic. 2021 a las 17:06
-1

Lo que tu quieres es exactamente el mismo efecto que ago; pero sin darle click a los enlaces. Para que eso sea posible tendría que existir un evento javascript que se dispare cuando estés visualizando una sección de la pagina web. no sé si exista tal evento o talvez uses coordenadas del cursor para lograrlo.

"Me interesa saber si es posible lograr eso; o si ya lo resolviste---al menos déjanos el código"

NOTA: Si dejaras un código ejecutable el cual ver, mas personas se animarían a responder.

let elemenu = document.querySelectorAll(".ele-menu");
elemenu.forEach(lin => {
    lin.addEventListener("click", (e) => {
    elemenu.forEach(link => {
          link.classList.remove("active");
    });
    e.target.classList.add("active");
    });
});
.menu-lateral{
width: 100px;
height: 100px;
background-color: grey;
position: fixed;
right: 16px;
}
.contenido-menu-lateral{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
}

ele-menu{
display:block;
}

.contenido{
width: 100vw;
height: 700px;
}
.compartimento{
width: 80vw;
height: 500px;
background-color: green;
margin-top: 30px;
}
#detalles{
background: orange;
}
#datostecnicos{
background: purple;
}
#grafico{
background: green;
}
.active{
background: blue;
}
<div class="menu-lateral">
    <div class="contenido-menu-lateral box">
        <a href="#detalles" class="ele-menu"><span class="iconosml"><i class="fas fa-info"></i></span>Detalles</a>
        <a href="#datostecnicos" class="ele-menu"><span class="iconosml"><i class="fas fa-stream"></i></span>Datos técnicos</a>
        <a href="#grafico" class="ele-menu"><span class="iconosml"><i class="fas fa-chart-line"></i></span>Gráfico</a>
    </div>
</div>

<div class="contenido">
    <section id="detalles" class="compartimento">
        <h2>Detalles</h2>
        <p> Aquí van los detalles</p>
    </section>
    <section id="datostecnicos" class="compartimento">
        <h2>Datos técnicos</h2>
        <p>Aquí indicadores técnicos</p>
    </section>
    <section id="grafico" class="compartimento">
    <h2>GRAFICO</h2>
    </section>
</div>

Tu Respuesta

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

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