Вложенный Div вопрос наведения

Question

У меня есть 3 HTML-див, как это:

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2"></div>
</div>

Я хочу, чтобы при наведении указателя мыши на MainDiv или nestedDiv1 я устанавливал цвет 1 для MainDiv и цвет 2 для nesteddiv2, затем при наведении указателя мыши на nesteddiv2 меняю цвет фона nesteddiv2 и MainDiv.

Я предпочитаю делать это с помощью CSS, я знаю способ javascript.

Спасибо Маздак

Answer 1

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

Используйте JavaScript, если он так важен.

Answer 2

Единственный способ сделать это только с помощью CSS - это использовать дополнительный div для покрытия maindiv при наведении курсора.И это не сработало бы в IE

. Это была бы разметка

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2">
    <div id="extradiv"><div>
  </div>
</div>

. CSS был бы очень хитрым.

(отказ от ответственности: это не было проверено - возможно, вам понадобится больше правил)

• MainDiv должен быть позицией: относительным или позицией: абсолютным, фиксированной ширины и высоты и z-index = -1.
• Вложенные div 1 и 2 НЕ могут быть позицией: относительной или абсолютной, а z-index = 1
• Дополнительный div должен быть: position: absolute, top: 0, left: 0, то же самое с указанием высоты и высоты, что и MainDiv, display: hidden и z-index = 0
• # nexteddiv2: hover #extradiv будет иметь display: block

z-indexзаставит maindiv всегда оставаться позади других, в то время как вложенные div 1 и 2 всегда остаются на вершине.extradiv будет между ними, «покрывая» maindiv, но только тогда, когда наведено nesteddiv2.

Недостаток этого метода заключается в том, что extradiv будет виден до тех пор, пока вы не перестанете его висеть, а не просто nesteddiv2.

Answer 3

Нет способа выбрать элемент из другого, просто это невозможно.

Но вы можете сделать это с помощью jQuery следующим образом:

$(function() {
    $("#div1").hover(function() {
        $("#show-hide").toggleClass('highlight');
    });
});

Я сделал пример для вас здесь .

Answer 4

Для данного HTML вы можете сделать следующее CSS

#MainDiv:hover{
    color:red;
}

#MainDiv div#nesteddiv1{
    color:gray;
}

#MainDiv div#nesteddiv1:hover{
    color:blue;
}

#MainDiv div#nesteddiv2{
    color:yellow;
}

#MainDiv div#nesteddiv2:hover{
    color:green;
}

Примечание: Это не будет работать в IE, так как он поддерживает наведение только на тег.