Использование: наведите курсор для изменения css другого класса?

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

Что-то вроде:

.item:hover .wrapper { /*some css*/ }

Только 'wrapper' не находится внутри 'item', это где-то еще.

Я действительно не хочу использовать javascript для чего-то такого простого, но если мне нужно, как бы я это сделал? Здесь моя неудачная попытка:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";

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

[изменить]

Это меню. Каждый элемент меню имеет отдельный класс. При наведении на элемент подменю появляется вправо. Это похоже на наложение, когда я использую инструмент "Inspect Element", я вижу, что весь сайт html изменяется, когда подменю активно (что означает ничего, кроме подменю). Класс, который я называю "оберткой", имеет css, который управляет фоном для подменю. Там действительно нет связи, которую я вижу между двумя классами.

Ответы

Ответ 1

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

Для всех остальных случаев вам понадобится JavaScript. jQuery и фреймворки, такие как Angular, могут справиться с этой проблемой с относительной легкостью.

[изменить]

С помощью нового селектора CSS (4) : has() вы сможете настроить целевые родительские элементы/классы, сделав Решение CSS-Only будет доступно в ближайшем будущем!

Ответ 2

Есть два подхода, которые вы можете предпринять, чтобы повлиять на зависавший элемент (E) другой элемент (F):

  • F является дочерним элементом E или
  • F - элемент более позднего родства (или родственного потомка) E (в том, что E появляется в разметке /DOM до F):

Чтобы проиллюстрировать первый из этих параметров (F как потомок/дочерний элемент E):

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}​

Чтобы продемонстрировать второй вариант, F является элементом sibling в E:

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}​

В этом примере, если .wrapper был непосредственным родственником .item (без других элементов между ними), вы также можете использовать .item:hover + .wrapper.

демонстрация JS Fiddle.

Литература:

Ответ 3

Предоставленный .wrapper находится внутри .item и при условии, что вы либо не в IE 6, либо .item - это тег, CSS, который у вас есть, должен работать нормально. У вас есть доказательства, чтобы предположить, что это не так?

EDIT:

Только CSS не может повлиять на то, что не содержится в нем. Чтобы это произошло, отформатируйте свое меню так:

<ul class="menu">
    <li class="menuitem">
        <a href="destination">menu text</a>
        <ul class="menu">
            <li class="menuitem">
                <a href="destination">part of pull-out menu</a>
... etc ...

и ваш CSS:

.menu .menu {
    display: none;
}

.menu .menuitem:hover .menu {
    display: block;
    float: left;
    // likely need to set top & left
}

Ответ 4

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

.root:hover    .child {
   
}