Влияет на div: наведите указатель мыши на другой div

Question

Я создаю галерею, где, когда вы наведите указатель мыши на основное изображение, миниатюры должны стать прозрачными. Я хотел бы добиться этого с помощью чистого CSS, но я не уверен, что это возможно.

CSS:

/* should affect thumbs but not main */ 
/* obviously this code wouldn't work */ 
#main:hover, #thumbs { 
    opacity: .5; 
} 

HTML:

<div id="main"> 
    Hover over me to change #thumbs 
</div> 
<div id="thumbs"> 
    I change when you hover over #main 
</div> 

Является ли это возможно с использованием чистого CSS?

Answer 1

Конечно, просто использовать прилегающую селектор родственный:

#div1:hover + #div2 { 
    ... 
} 

Пример здесь: http://jsfiddle.net/6BfR6/94/

Answer 2

даже если это так, он не будет работать в IE :)

я предложил бы использовать OnMouseOver событие

однако это хороший вопрос, и мне интересно, если кто-то имеет решение сделать это кросс-браузер через css

Answer 3

Могут быть затронуты только дети селектора. В противном случае вам нужно будет использовать javascript.

Например:

div:hover #childDiv { 
    background: green; 
} 

Answer 4

Я думаю, что вы будете нуждаться в некоторых JavaScript для этого.

Answer 5

Нет. Вам нужно будет использовать Javascript.

Answer 6

# Div1: парения + # div2 { ... }

он отлично работает в IE 7, 8, 9 и 10. Нет необходимости в каких-либо JS или onovermouse и НЕ ТОЛЬКО могут пострадать дети селектора.

Попробуйте пример Ссылка на «Nightfirecat».