Nuestro equipo especializado pasados varios días de investigación y de juntar de datos, encontramos los datos necesarios, queremos que te sea útil en tu plan.
Solución:
Puedes hacer un hermano que sigue un cambio de elemento cuando se desplaza ese elemento, por ejemplo, puede cambiar el color de su a enlace cuando el h1 está suspendido, pero no puede afectar a un anterior hermano de la misma manera.
h1
color: #4fa04f;
h1 + a
color: #a04f4f;
h1:hover + a
color: #4f4fd0;
a:hover + h1
background-color: #444;
Heading
The "Button"
Another Heading
Establecemos el color de un H1 en un tono verdoso, y el color de un A que es hermano de un H1 en rojizo (primeras 2 reglas). La tercera regla hace lo que describo: cambia el color A cuando se pasa el H1.
Pero fíjate en la cuarta regla. a:hover h1 solo cambia el color de fondo del H1 que sigue el ancla, pero no la que le precede.
Esto se basa en el orden DOM, y es posible cambiar el mostrar orden de los elementos, por lo que aunque no puede cambiar el elemento anterior, puede hacer que ese elemento Aparecer estar detrás del otro elemento para conseguir el efecto deseado.
Tenga en cuenta que hacer esto podría afectar la accesibilidad, ya que los lectores de pantalla generalmente recorrerán elementos en orden DOMque puede no ser el mismo que el visual pedido.
No hay un selector de CSS que pueda hacer esto (incluso en CSS3). Los elementos, en CSS, nunca son conscientes de su padre, por lo que no puede hacer a:parent h1 (por ejemplo). Tampoco son conscientes de sus hermanos (en la mayoría de los casos), por lo que no puede hacer #container a:hover /* do something with sibling h1 */ . Básicamente, las propiedades CSS no pueden modificar nada más que elementos y sus hijos (no pueden acceder a los padres o hermanos).
Podrías contener el h1dentro de la apero esto haría que su h1 flotante también.
Solo podrá lograr esto usando JavaScript (prueba de concepto jsFiddle). Esto se vería algo como:
$("a.button").hover(function()
$(this).siblings("h1").addClass("your_color_class");
, function()
$(this).siblings("h1").removeClass("your_color_class");
);
El html:
El CSS:
#banner:hover h1
color: red;
#banner h1:hover
color: black;
a
position: absolute;
El violín: http://jsfiddle.net/joplomacedo/77mqZ/
Él a elemento está absolutamente posicionado. Puede que no sea perfecto para su estructura existente. Déjame saber, podría encontrar una solución.
valoraciones y reseñas
Si estás de acuerdo, eres capaz de dejar un escrito acerca de qué le añadirías a esta noticia.