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

Question

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

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

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

Answer 1

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

Пример CSS:

#navButton div.text {
    display:none;
}

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

Это приведет к отображению текста div, если вы наведете курсор на элемент с id = "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:

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

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

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

OR

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

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

Answer 2

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

jsFiddle .