CSS:: child установлен для изменения цвета в родительском зависании, но изменяется также при зависании

У меня есть <a> с <span> детьми. Я написал некоторый CSS, который меняет цвет границы дочерних элементов при наведении на них родительского элемента, но также меняет цвет границы при наведении на дочерние элементы, чего не следует делать.

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}   
<a>
    Parent text
    <span>Child text</span>    
</a>

Ответы

Ответ 1

Обновить

Нижеследующее имело смысл для 2013 года. Однако теперь я бы использовал селектор :not(), как описано ниже.

CSS может быть перезаписан.

ДЕМО: http://jsfiddle.net/persianturtle/J4SUb/

Использовать этот:

.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;
}
<a class="parent">
    Parent text
    <span>Child text</span>    
</a>

Ответ 2

Если вы не заботитесь о поддержке старых браузеров, вы можете использовать :not(), чтобы исключить этот элемент:

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

Демо: http://jsfiddle.net/vz9A9/1/

Если вы хотите их поддержать, я думаю, вам придется либо использовать JavaScript, либо переопределить свойства CSS еще раз:

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