html - español - personalizar contact form 7 plugin

CSS:: child está configurado para cambiar el color en el elemento principal, pero también cambia cuando se mantiene activo.

Question

Tengo un código que tiene el <a> como padre y <span> como hijo dentro. He escrito algunos CSS que cambian el color del borde del niño cuando se coloca el cursor sobre el padre. Funciona cuando muevo el mouse sobre el padre, pero si el ratón sobre el niño también cambia de color y no debería.

Aquí un código:

HTML

<a class="parent">
Parent text
<span>
Child text
</span>
</a>

CSS

.parent{
padding:50px;
border: 1px solid black;
}
.parent span{
position:absolute;
top:200px;
padding:30px;
border: 10px solid green;
}
.parent:hover span{
border: 10px solid red;
}

Aquí puede ver el problema en jsfiddle: http://jsfiddle.net/vz9A9/

¿Podría alguien ayudarme a arreglarlo por favor?

Answer 1

Actualizar

Lo siguiente tenía sentido para 2013. Sin embargo, ahora, usaría el selector :not() como se describe a below .

CSS puede ser sobrescrito.

DEMO: http://jsfiddle.net/persianturtle/J4SUb/

Utilizar esta:

.parent{
padding:50px;
border: 1px solid black;
}
.parent span{
position:absolute;
top:200px;
padding:30px;
border: 10px solid green;
}
.parent:hover span{
border: 10px solid red;
}
.parent span:hover{
border: 10px solid green;
}

Answer 2

Si no le importa admitir navegadores antiguos, puede usar :not() para excluir ese elemento:

.parent:hover span:not(:hover) {
border: 10px solid red;
}

Demostración: http://jsfiddle.net/vz9A9/1/

Si desea admitirlos, creo que tendrá que usar JavaScript o anular las propiedades CSS de nuevo:

.parent span:hover {
border: 10px solid green;
}