CSS селектор ребенка не работает

Question

У меня есть следующий HTML-код:

<div class="resultimage"> 
    <a href="www.site.com"> 
     <img class="resultpic" src="images/image.jpg"> 
     <img class="resultview" src="images/view.png"> 
    </a> 
</div> 

и следующий CSS:

.resultimage:hover > .resultpic { 
opacity: 0.7; 
} 

Это не похоже на работу. На странице будет несколько экземпляров этого точного блока кода (я не уверен, что это важно). Возможно, я ошибаюсь, но я пытаюсь добиться этого: всякий раз, когда вы наводите верх над первым изображением, второе изображение появляется поверх него, а непрозрачность первого изображения уменьшается. Какой был бы лучший способ достичь этого? (для второго изображения установлено значение «display: none;» по умолчанию)

Answer 1

«>» селекторные запросы для ребенок потомки. попробовать

.resultimage:hover .resultpic { 
    opacity: 0.7; 
} 

Answer 2

> немедленно Селектор ребенок

но <img class="resultview" src="images/view.png"> не является непосредственным потомком <div class="resultimage"> но потомок. Следовательно, правильный синтаксис равен

.resultimage:hover .resultpic { 
    opacity: 0.7; 
} 

Answer 3

Добавить: наведите указатель мыши на определенный элемент, который вы выбираете. это имеет смысл, как:

.resultimage .resultpic:hover{ 
    opacity:0.7; 
} 

посмотреть демо на jsfiddle http://jsfiddle.net/dwX99/

Answer 4

Попробуйте это:

.resultimage:hover img.resultpic { 
    opacity: 0.7; 
}