Вопрос по javascript, css – Использование: hover, чтобы изменить CSS другого класса?

34

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

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

<code>.item:hover .wrapper { /*some css*/ }
</code>

Только «обертка» не внутри "предмета", он где-то еще.

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

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

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

[Редактировать]

Это меню. Каждый элемент меню имеет отдельный класс. Когда вы наводите курсор на элемент, справа появляется подменю. Это похоже на наложение, когда я использую «Инспектировать элемент». Я вижу, что весь веб-сайт html изменяется, когда подменю активно (что означает только подменю). Класс, который я называю «обертка» имеет CSS, который контролирует фон для подменю. На самом деле я не вижу связи между этими двумя классами.

Нет. CSS не позволяет не вложенным элементам влиять друг на друга. Для этого вам придется использовать Javascript. Marc B
Вы не хотите использоватьgetElementsByClassName так как это поддерживается не каждым браузером. Amberlamps
Лучше всего показать нам свое HTML-меню, чтобы мы могли точно определить, можете ли вы его выбрать. BoltClock♦
"somewhere else" : где именно? если.item был предыдущий брат, вы могли бы сделать.item:hover ~ .wrapper { ... } fcalderan

Ваш Ответ

4   ответа
64

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

F is a child-element of E, or F is a later-sibling (or sibling's descendant) element of E (in that E appears in the mark-up/DOM before F):

Для иллюстрации первого из этих вариантов (F как потомок / дитяE):

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

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

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

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

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

Рекомендации:

CSS 2.1 selectors, at the W3.org.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
5

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

РЕДАКТИРОВАТЬ:

Один только 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
}
Error: User Rate Limit Exceeded
3

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

.root:hover    .child {
   
}

9

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

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

[Редактировать]

С новым селектором CSS (4): Есть ()Вы сможете настроить таргетинг на родительские элементы / классы, что сделает решение только для CSS жизнеспособным в ближайшем будущем!

Error: User Rate Limit Exceeded:hasError: User Rate Limit Exceeded:has?

Похожие вопросы