0

Alguien tiene alguna idea de como modificar un pseudo elemento con jquery? En una barra de menu de una pagina web, agregue pseudo elementos para subrayar el boton cuando se hace hover, pero quiero hacer que se mantenga subrayado el boton en el que se encuentra actualmente.

introducir la descripción de la imagen aquí

Al hacer Hover:

introducir la descripción de la imagen aquí

El codigo html es:

<ul>
    <a href="index.php"><li>INICIO</li></a>
    <a href="deportes.html"><li>DEPORTES</li></a>
    <a href="edicion.html"><li>VIDEOS</li></a>
    <a href="noticia.php"><li>VIRALES</li></a>
    <a href="contacto.html"><li>CONTACTO</li></a>
</ul>

Y el codigo css es:

header ul li{
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
list-style: none;
color: #000;
padding: 15px 20px;
transition: 0.2s;
position: relative;
}

header ul li:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom:3px solid #83354F;
opacity: 0;
}

header ul li:hover:before{
cursor: pointer;
opacity: 1;
}

Quisera que quede como tiene youtube o como tienen otras paginas:

introducir la descripción de la imagen aquí

1
  • Lo que quieres hacer se puede siempre y cuando el re direccionamiento lo manejes con secciones, ocultando una y mostrando otra o con una landing page donde se te lleve hasta la sección a la que le diste click, si recargas la pagina ya se debe realizar un procedimiento mas lógico para validar en que sección se encuentra. el 22 nov. 2017 a las 17:00

1 respuesta 1

-1

No tienes ninguna clase header en tu código, ni los li están dentro de los lu, están dentro de a.

Añade float left (si los quieres a la izquierda). Aquí es jugar con tamaños y posiciones.

Yo he tratado un poco con los que no son before también. Hay otras mil maneras, pero creo que esta te podría servir.

header,ul,li{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  list-style: none;
  color: #000;
  padding: 15px 20px;
  transition: 0.2s;
  position: relative;
}

li:hover:before{
  cursor: pointer;
  opacity: 1;
}

li:before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% / 5);
  height: 100%;
  //border-bottom:3px solid #83354F;
  opacity: 0;
}

li{
  float:left;
}

li:hover{
  border-bottom:3px solid #83354F;
}

ul{
  width:100%;
}
<ul>
  <a href="index.php"><li>INICIO</li></a>
  <a href="deportes.html"><li>DEPORTES</li></a>
  <a href="edicion.html"><li>VIDEOS</li></a>
  <a href="noticia.php"><li>VIRALES</li></a>
  <a href="contacto.html"><li>CONTACTO</li></a>
</ul>

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.