Cómo cambiar un elemento mientras se desplaza sobre otro con CSS

3 minutos de lectura

Avatar de usuario de Neros
neros

He mirado varias otras preguntas, pero parece que no puedo resolver ninguna de ellas, así que aquí está mi problema: me gustaría tener una div o un spanal pasar el cursor sobre él, aparecerá un área y sería como un menú desplegable.

Como yo tengo un divy quiero pasar el mouse sobre él y hacer que muestre información sobre el elemento sobre el que pasé el mouse

<html>
<head>
<title>Question1</title>
<styles type="css/text">

  #cheetah {
      background-color: red;
      color: yellow;
      text-align: center;
  }

  a {
      color: blue;
  }

  #hidden {
      background-color: black;
   }

   a:hover > #hidden {
      background-color: orange;
      color: orange;
  }
</styles>

</head>
<body>
  <div id="cheetah">
     <p><a href="#">Cheetah</a></p>
  </div>
  <div id="hidden">
     <p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
  </div>
</body>
</html>

Pero esto ^ no parece funcionar, no sé por qué… y si hay una manera de hacerlo en CSS, me gustaría saberlo, pero quiero todas y cada una de las sugerencias.

  • Vea mis comentarios al final de la pregunta. También hay un violín allí. Si la opción de cambiar su estructura html es una opción: stackoverflow.com/questions/6669147/…

    – Yawad

    23 de diciembre de 2011 a las 10:00


  • en jquery jsfiddle.net/amkrtchyan/e8wJb

    – Aram Mkrtchyan

    23 de diciembre de 2011 a las 10:15

Puede lograr esto en CSS solo si el div oculto es un elemento secundario del elemento que usa para desplazarse:

http://jsfiddle.net/LgKkU/

Avatar de usuario de OverZealous
Demasiado entusiasta

No puede afectar un elemento no secundario usando :hover desde dentro de CSS2, que es compatible con todos los navegadores comunes.

Puede afectar a un elemento hermano utilizando los selectores CSS2.1, así:

a:hover + .sibling { ... }

Sin embargo, esto solo funciona para hermanos directos. Esto significa que podría tener HTML como este:

<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>

Note que el a y el span son hermanos directos.

Aquí hay un violín que muestra a los hermanos trabajando: http://jsfiddle.net/vUUxp/

Sin embargo, no todos los navegadores admiten los selectores de hermanos CSS2.1por lo que debe decidir en función de su público objetivo si puede usar esto o no.

Editar: Corregido mi error en la versión CSS para el + selector: es 2.1 lo que lo define, no CSS3. También agregué un enlace que muestra el soporte del navegador. De lo contrario, la respuesta es la misma.

O, si está abierto a ello, utilice jQuery.

Algo como esto funcionaría:

$("#element") // select your element (supports CSS selectors)
    .hover(function(){ // trigger the mouseover event
        $("#otherElement") // select the element to show (can be anywhere)
            .show(); // show the element
    }, function(){ // trigger the mouseout event
        $("#otherElement") // select the same element
            .hide(); // hide it
    });

Y recuerda envolver esto en una función preparada para DOM ($(function(){...}); o $(document).ready(function(){...});).

Absolutamente puedes hacer esto en CSS3 ahora usando el ~ selector de hermanos adyacentes.

triggerSelector:hover ~ targetSelector {
    display: block;
}

Por ejemplo, si desea que aparezca información sobre herramientas al pasar el mouse sobre un botón adyacente:

.button:hover ~ .tooltip {
    display: block;
}

¿Ha sido útil esta solución?