Могу ли я сделать это с помощью псевдо-класса hover?

Question

Я знаком с классом hover psuedo и использую его для элементов, а также для обычной настройки ссылок, к которой мы привыкли. Однако я пытаюсь создать ситуацию, когда наведение над одним элементом изменит свойства другого. Например, если бы я наводил на .block1, то # block2 стал бы видимым. Я бы подумал, что .css будет выглядеть как-то ...

.block1:hover div#block2 
{ 
    visibility:visible; 
} 

но это меня никуда. Мысли? Я знаю, что я, вероятно, мог бы использовать javascript, чтобы это произошло (создайте элементы и исчезните), но я хотел бы найти для этого чистое решение css.

Answer 1

Если этот второй элемент является потомком первого, тогда он будет работать.

jsFiddle.

Answer 2

Элемент, который вы хотите изменить, должен быть дочерним элементом того, над которым вы нависаете.

Пример CSS:

#navButton div.text { 
    display:none; 
} 

#navButton:hover div.text { 
    display:block; 
} 

Это сделает отображение текста Div при наведении мыши на элемент с идентификатором = "navButton".

В противном случае, используйте раствор JQuery:

CSS:

#navButton div.text { 
    display:none; 
} 

.hover { 
    display:block; 
} 

Javascript:

$("#navButton").hover(
    function() { 
     $("#navButton div.text").addClass("hover"); 
    }, 
    function() { 
     $("#navButton div.text").removeClass("hover"); 
    } 
); 

Edit:

Вы также можете сделать это для элементов sibling в CSS, если зависающий элемент предшествует элементу, который вы хотите изменить. Как так:

#navButton + div.text { 
    display:none; 
} 

#navButton:hover + div.text { 
    display:block; 
} 

ИЛИ

#navButton ~ div.text { 
    display:none; 
} 

#navButton:hover ~ div.text { 
    display:block; 
}