Cómo cambiar un elemento al pasar el mouse sobre otro

He examinado varias otras preguntas, pero parece que no puedo encontrar ninguna, así que aquí está mi problema, me gustaría tener un div o un span, cuando pasas el mouse sobre él sobre ella aparecería un área y sería como un menú desplegable.Cómo cambiar un elemento al pasar el mouse sobre otro

Tal como tengo un div, y quiero que se ciernen sobre ella y que se muestre alguna información sobre el artículo que se movía sobre

<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 se parece a trabajar, no sé por qué. .. y si hay una manera de hacerlo en css, me gustaría saber, pero quiero todas las sugerencias.

Fuente

2011-12-23 Joshua Gottschalk

Ver mis comentarios en la parte inferior de la pregunta. También hay un violín allí. Si la opción de chnaging su estructura html es una opción - http://stackoverflow.com/questions/6669147/css-change-two-links-when-hovering-over-either-one-of-them – Jawad

en jquery http: //jsfiddle.net/amkrtchyan/e8wJb/ –

se puede lograr esto en el CSS sólo si el div oculto es un hijo del elemento se utiliza para estacionario:

http://jsfiddle.net/LgKkU/

Fuente

2011-12-23 09:52:49 ptriek

No puede afectar a un elemento no-niño usando :hover desde dentro CSS2, el cual es compatible con todos los navegadores comunes.

Puede afectar a un elemento hermano usando selectores CSS 2.1, así:

a:hover + .sibling { ... }

Sin embargo, esto sólo funciona para hermanos directos. Esto significa que usted podría tener HTML así:

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

en cuenta que la a y la span son hermanos directos.

Aquí es un violín que muestra los hermanos que trabajan: http://jsfiddle.net/vUUxp/

Sin embargo, not all browsers support the CSS2.1 sibling selectors, por lo que necesita para decidir sobre la base de su público objetivo si se puede usar o no.

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

Fuente

2011-12-23 09:55:54 OverZealous

También hay [selectores generales de hermanos] (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors), pero también funcionan solo para posteriores elementos – spelufo

O, si está abierto, use 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 a terminar con esto en una función listo DOM ($(function(){...}); o $(document).ready(function(){...});).

Fuente

2011-12-23 09:56:51 Purag

Cómo cambiar un elemento al pasar el mouse sobre otro

Respuesta

Cuestiones relacionadas