Вопрос по CSS (не для начинающих)

[Nezznayka]

Доброго времени суток.

Три DIVa вложены друг в друга

<div id="#1">
<div id="#2">
<div id="#3">
</div>
</div>
</div>

Абсолютно позиционированы в разных местах (не накладываются, не пересекаются, хотя это и не важно).

Каждому по отдельности присвоено CSS правило для состояния :hover (например меняется цвет фона)

Получаем:
- при мыши над div#1 он меняет фон,
- при мыши над div#2 меняет фон div#2 и div#1,
- при мыши над div#3 меняют фон все три div'а

Вопрос:
- Как написать CSS так чтобы "родитель" не реагировал на :hover своих потомков?
- или говоря языком JS как остановить всплытие event'a

Спасибо.

[lux16]

Хм, правильно организуй классы, откажись от идентификаторов =)

[Nezznayka]

Сообщение от lux16

Хм, правильно организуй классы, откажись от идентификаторов =)

Тип селектора CSS не причем, можно вообще не использовать ни id ни class а только контекстные.

Вопрос в том можно ли написать разные правила для "настоящего" :hover (когда курсор на элементе) и для :hover который случается потому что курсор над потомком?

[Alexei91]

Firebug/Google Chrome(Ctrl+Shift+J, проверка элемента).

В Firebug: ПКМ->Анализировать элемент->Правая колонка->Унаследовано от...

И не будешь задавать таких вопросов.

[TranceSmile]

Но тут наверно hover-ом не получится. Делай так

<script>
function func1() {
document.getElementById('#1').style.background('color');
}
function func2() {
document.getElementById('#1').style.background('color');
document.getElementById('#2').style.background('color');
}
function func3() {
document.getElementById('#1').style.background('color');
document.getElementById('#2').style.background('color');
document.getElementById('#3').style.background('color');
}
</script>
<div id="#1" onmouseover="func1()">
 <div id="#2" onmouseover="func2()">
 <div id="#3" onmouseover="func3()">
 </div>
 </div>
 </div>

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

[navodri]

без JavaScript такое не реализовать. могу за деньги сделать. пиши в личку.

[Nezznayka]

Сообщение от Alexei91

В Firebug: ПКМ->Анализировать элемент->Правая колонка->Унаследовано от...

Наверно я не совсем ясно сформулировал вопрос. Речь идет не о наследовании потомками свойств родителя. А о "наследовании" родителем состояния (:hover) потомков.

to: TranceSmile, navodri

Ребята спасибо за предложение, написать на JS могу сам, но хочу обойтись без него.

[TranceSmile]

Пиши тогда javascript

[impulsgraw]

у тебя получается так, что див прозрачный.
вместо дива создай картинку.