:hover и :active у дочерних и родительских элементов
 

Есть активный элемент (большая кнопка) — меняет стиль на :hover и на :active.
У этого элемента есть дочерний элемент (маленькая кнопочка сверху), который также реагирирует на :hover и на :active. Нужно сделать так, чтобы при нажатии на дочерний элемент стиль менялся только у дочерней кнопки (а у родительской оставался бы просто стиль :hover).

В IE и Opera это так и происходит.
А в браузерах на основе WebKit и Mozilla — нет, срабатывают оба элемента.

Вот пример: http://apple-cat.ru/-d/qa/active_click.html

Матерые специалисты, подскажите как решить проблему? ))

Dimus,
Оберните Ваш Раrent еще дивом, перетащите кнопку во внешний див, задайте ей
z-index:2; и спозиционируйте на старое место - тады hover(ы) будут раздельны

Спасибо!!
Это почти то, что нужно!
Один момент — можно ли как-то сделать, чтобы родительский стиль :hover при наведении на дочернюю (хотя теперь уже не дочернюю) кнопку оствался?

Так сделано у хрома на странице с самыми посещаемыми сайтами.

Не понял, поясните: - должен возникать эффект hover на большом квадрате, при наведении на кнопку ?

Да, ховер должен оставаться при наведении на кнопку на большом квадрате, как здесь:
http://apple-cat.ru/-d/qa/active_click.png

Сейчас этого не происходит:
http://apple-cat.ru/-d/qa/active_click1.html

Поправьте эти два пункта

.parent.hover,
		.parent:hover {
			box-shadow: 2px 4px 1px hsla(0, 0%, 0%, 0.5);
			top: -2px;
			background-color: hsl(0, 90%, 95%);
		}

<div class="child" id="child1" onmouseover="this.parentNode.childNodes[1].className='parent hover'" onmouseout="this.parentNode.childNodes[1].className='parent'">Х</div>

Ооотлично!
Все работает, хорошее решение. Прибольшущее вам спасибо!!!