> Faqs > Aplicar hover a un elemento y afectar otro

Aplicar hover a un elemento y afectar otro

Hola que tal, soy nuevo en esto y he encontrado algunos ejemplos pero no logro decifrarlos o mejor dicho adaptarlos a mi proyecto...

Resulta que tengo una lista ordenada de elementos y quiero aplicar un hover para que al pasar sobre cada uno de ellos, aparezca una imagen en otro bloque.

¿Es posible hacerlo con CSS y HTML?

Aquí mi código....

 <div class="fondoBloques" id="seccion1">
       <h2>Sección 1: Episodios</h2>
        <ol>
            <li>Episodio I: La amenaza fantasma.</li>
            
            <li >Episodio II: El ataque de los clones.</li>
            <li >Episodio III: La venganza de los Sith.</li>
            <li >Episodio IV: Una nueva esperanza.</li>
            <li >Episodio V: El imperio contraataca.</li>
            <li >Episodio VI: El regreso del Jedi.</li>
            <li >Episodio VII: El despertar de la fuerza.</li>
            <li >Episodio VIII: Los últimos Jedi.</li>
            <li >Episodio IX: El ascenso de Skywalker.</li>
        </ol>       
    </div>
    <div class="fondoBloques mainRight" >
        <img class="foto" src="img/starwars/mini_transparente.png">       
    </div>

Quiero lograr que al pasar el mouse, cambie la imagen del siguiente bloque div... Agrego el poco CSS que tienen esas clases y el id, realmente son para puro acomodo.

.fondoBloques{    
    color: white;
    background-color: rgba(0,0,0,.3);
    border-radius: 15px;
    border-style: solid;
    border-color: yellow;
    float: left;    
}

.mainRight{
    width: 65%;
    height: 540px;
    margin-left: 2%;
    margin-bottom: 150px;
}

#seccion1{
    width: 30%;
    height: 540px;
    margin-left: 1%;
}
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Así, de entrada, lo que quieres hacer se hace por medio de Javascript. No hay manera de que al pasar el ratón por encima de un elemento (hover) <li> se cambie la imagen que se muestra en otro elemento <img>. En todo caso podrías cambiar el estilo del elemento que recibe el hover. La imagen es otro elemento ajeno al item de la lista, por lo que no puedes alterar los estilos mediante el selector :hover.

Lo que sí podrías hacer, solamente con CSS, es apoyarte en el pseudo-elemento after o before para insertar contenido, como una imagen, cuando se hace hover sobre un elemento de la lista.

Te dejo un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Probando hover y :after</title>
  <style>
    li:hover {
      background-color: aquamarine;
      padding: 20px;
    }
    li:hover::after {
      position: relative;
      left: 20px;
      top: 5px;
    }
    li.img1:hover::after {
      content: url(http://lorempixel.com/32/32/sports);
    }
    li.img2:hover::after {
      content: url(http://lorempixel.com/30/30/nature);
    }
  </style>
</head>
<body>
  <ol>
    <li class="img1">Probando 1</li>
  </ol>
  <ol>
    <li class="img2">Probando 2</li>
  </ol>
</body>
</html>

Pero aunque puedas hacer cosas como estas, usar solamente CSS es un poco rígido y no te dejaría llegar al punto donde deseas. Así que, no te queda otra que usar un poco de Javascript.

De todos modos, el comportamiento que necesitas en Javascript son tres líneas de código si llega.

Te dejo un ejemplo sobre cómo lo podrías hacer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Probando Cambiar imagen con Javascript</title>
  <style>
  
  </style>
</head>
<body>
<div class="fondoBloques" id="seccion1">
  <h2>Sección 1: Episodios</h2>
  <ol id="pelisList">
    <li data-imagen="http://lorempixel.com/300/300/nature">Episodio I: La amenaza fantasma.</li>
    <li data-imagen="http://lorempixel.com/300/300/sports">Episodio II: El ataque de los clones.</li>
  </ol>
</div>
<div class="fondoBloques mainRight">
  <img id="foto" src="img/starwars/mini_transparente.png">
</div>

<script>
  document.querySelectorAll("#pelisList li").forEach(item => {
    item.addEventListener('mouseenter', () => document.getElementById('foto').src=item.dataset.imagen);
  })
</script>
</body>
</html>

Solo te quedaría poner el evento "mouseleave" para eliminar la imagen (restaurando tu imagen transparente), cuando se sale del ratón del elemento de la lista.

Alba
142 2 10 4
Muchas gracias!... me ha servido y con un poco de lógica pude hacer el "mouseleave", voy empezando con html y css. No he llegado aún a la parte de Javascript pero fue sencillo. Gracias nuevamente