Soy nuevo en css, especialmente los combinadores, pero estoy tratando de cambiar el elemento css del elemento ap al pasar el mouse sobre un elemento h1, ambos en un div de la clase "a", pero no puedo entender cómo hacerlo. Aquí está mi código

Html

<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>

Css

div.a h1:hover ~ div.a p {color:red;}

Entonces, ¿qué estoy haciendo mal?

2
Asif Ali 13 ene. 2017 a las 18:14

3 respuestas

La mejor respuesta

No necesita apuntar al elemento div nuevamente.

Todos los párrafos Demostración JsFiddle

Primer párrafo Demostración de Jsfiddle

div.a h1:hover~p{color:red;}
<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<p>Some other text.</p>

Si solo desea orientar la primera etiqueta de párrafo <p>, puede usar

div.a h1:hover+p{color:red;}
<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>

Si tiene alguna pregunta sobre el código fuente anterior, deje un comentario a continuación y me pondré en contacto con usted lo antes posible.

Espero esta ayuda ¡Feliz codificación!

3
NewToJS 13 ene. 2017 a las 15:27

Si está utilizando jQuery, puede usar el siguiente código para transformar el párrafo.

$('div.a h1').hover(function() {
        $(this).siblings('p').css(color: red;);
    }, function() {
        $(this).siblings('p').css( << Previous Css >> );
    }
});
1
JrGiant 13 ene. 2017 a las 15:26

Esta solución debería funcionar:

div.a > h1:hover + p {
    color:red;
}

> h1:hover para seleccionar h1: elemento flotante donde el padre es div con la clase 'a'

+ p para seleccionar el elemento p que se coloca inmediatamente después de h1: elemento flotante

2
Olivier Boissé 13 ene. 2017 a las 15:22