2

Estoy aprendiendo CSS.

.navbar2{
display: none;
}
  <div class="navbar">
  <a class= "dropbtn">Prueba</a>
  <a>Test</a>
  </div>

  <div class="navbar2">
  <a>Test2</a>
  </div>

¿Existe alguna forma de utilizar solo CSS (no javascript) para cambiar el estilo de navbar2 o de alguno de sus elementos usando un elemento interno de navbar?

Algo así como

.navbar .dropbtn:hover .navbar2{display:block;}

Que, por supuesto, no funciona.

Gracias por su paciencia y saludos.

2 respuestas 2

3

No puedes retroceder en el DOM con puro CSS.

Al hacer :hover de un elemento, tienes acceso a sus descendientes directos, a sus hermanos y sus descendientes (de los hermanos), pero no puedes ir atrás a un hermano del padre de ese elemento.

Encontrarás una excelente explicación en el vínculo del inicio, en inglés.

Dejo un ejemplo de cómo puedes ir a los descendientes de los hermanos, al hacer hover en el padre .navbar y a los hermanos al hacer hover en el .dropbtn hijo de este.

Encontrarás más información en selectores CSS (en inglés).

.navbar {
  color: black;
  background-color: lightgrey;
}

.navbar .dropbtn {
  color: white;
}

.navbar2 {
  display: none;
}

.navbar:hover {
  color: blue;
  background-color: grey;
}

.navbar:hover ~ .navbar2 {
  display: block;
}

.navbar:hover ~ .navbar2 .dropbtn {
  color: red;
}

.navbar .dropbtn:hover {
  color: black;
}

.navbar .dropbtn:hover ~ a {
  color: pink;
}
<div class="navbar">
  <a class= "dropbtn">Prueba</a>
  <a>Test</a>
</div>

<div class="navbar2">
  <a class= "dropbtn">Prueba2</a>
  <a>Test2</a>
</div>

0

para cambiar un estilo usando un elemento interno puedes hacerlo usando los simbolos >, indicando a todos los hijos que pertenecen al padre que siga el css. Por ejemplo:

 <style>
 .navbar2 > a{
 color:blue;
 }
 </style>

  <div class="navbar2">
  <a>Test2</a>
  </div>´

También puedes hacerlo con el selector de clase o con el id. Por ejemplo, aquí es con class.

   <style>
   .navbar .dropbtn{
   color:red;
   }
   </style>

  <div class="navbar">
  <a class= "dropbtn">Prueba</a>
  <a>Test</a>
  </div>
2
  • Gracias, es así cómo lo he estado haciendo mientras aprendo, sin embargo "haciendo cosas más complicadas" no me resulta al usar el ejemplo de arriba 'navbar:hover' y con eso cambiar el estilo de un elemento que este afuera de 'navbar'. ¿Sabes cómo podría solucionarse el ejemplo de mi post?, cambiar el estilo de un elemento externo al pasar el mouse o al presionar ¿O no se puede hacer?, mientras sea el mismo elemento o uno "al lado" me resulta, pero cuando es otro, no me resulta (o desconozco cómo se hace).
    – motocross
    Commented el 20 may. 2021 a las 6:04
  • Seguro se puede hacer. ¿Lo que quieres es cambiar el estilo de otro elemento cuando navbar:hover esté activo? Si es eso a lo que te refieres, la forma más fácil para eso es usar Javascript. Un saludo. Commented el 20 may. 2021 a las 6:24

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.