Cambiar un <div> al hacer "hover" en otro <div> diferente

Bien. Tengo una página con seis <div> dentro de otro <div> padre, cada uno con su respectivo id (http://vindnetwork.jimdo.com/) Y quiero que al pasar el ratón sobre un <div>, ocurra algo en un <div> que está fuera del<div> padre ¿Me explico?

Básicamente quiero que al hacer hover en un <div>, haya cambios CSS en un <div> sin ninguna relación a ellos. Y si es imposible, que me expliquen a relacionarlos entre si, por favor.

Gracias :D!

Respuestas

Con los selectores de CSS 2 y CSS 3 no es posible hacer lo que quieres. El motivo es que solo puedes seleccionar elementos que estén dentro de otros y elementos que sean "hermanos" de otros (que compartan el mismo padre). En tu caso el <div> que activa el hover y el <div> que reacciona a ese cambio no tienen ninguna relación entre sí.

Así que la única solución que te queda es usar JavaScript. Suponiendo que tu código HTML sea el siguiente:

<body>
  <div id="padre">
    <div id="hijo1"> ... </div>
    <div id="hijo2"> ... </div>
    <div id="hijo3"> ... </div>
  </div>
 
  ...
 
  <div id="otro_div"> ... </div>
</body>

Si puedes usar jQuery, la solución sería tan sencilla como lo siguiente (la he adaptado de la solución original que encontré aquí):

$(function() {
  $('#padre > div').hover(function() {
    $('#otro_div').css('background-color', '#336699');
  }, function() {
    // vuelve a dejar el <div> como estaba al hacer el "mouseout"
    $('#otro_div').css('background-color', '');
  });
});

@javiereguiluz

7 junio 2015, 16:33

Muchas gracias javier, me pondré a aprender lo mas básico que pueda de JQuery, podrías decirme una forma sencilla de unir ese código que has puesto al final con mi página html? Gracias :)

@Stalkend1

7 junio 2015, 22:58

Este sería el código HTML/JavaScript completo que deberías utilizar:

<!DOCTYPE html>
<html>
<head>
    <title>Mi página</title>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
          $('#padre > div').hover(function() {
            $('#otro_div').css('background-color', '#336699');
          }, function() {
            // vuelve a dejar el <div> como estaba al hacer el "mouseout"
            $('#otro_div').css('background-color', '');
          });
        });
    </script>
</head>
<body>
    <div id="padre">
        <div id="hijo1"> ... </div>
        <div id="hijo2"> ... </div>
        <div id="hijo3"> ... </div>
    </div>
 
    ...
 
    <div id="otro_div"> ... </div>
</body>
</html>

@javiereguiluz

8 junio 2015, 9:06