Css: зависание влияет только на верхний div гнезда

Привет: получил некоторый html как:

<div class="class" >
    <div class="class" >
    </div>
</div>

И некоторые css вроде:

div.class:hover
{
    border-width:2px;
    border-style:inset;
    border-color:red;
}

Когда я нависаю над внутренним div, оба divs получают красную границу. Можно ли остановить распространение и получить красную границу на внутреннем div с помощью css?

Спасибо.

EDIT: начиная с ответа, на который указывает borrible, я закончил:

    $("div.class").mouseover(
        function(e) {
            e.stopPropagation();
            $(this).css("border-color", "red");
        }).mouseout(
        function() {
            $(this).css("border-color", "transparent");
        });

Позовите его не css, но выполняет задание. Спасибо всем, не получили то, что я хотел, но узнали много нового. Не переполнение стека отлично:)

Ответ 1

Посмотрите http://jsfiddle.net/n6rzA/

Код оттуда:

<div class="c">
    <div class="c"></div>
</div>

.c:hover {border:solid 1px red}
.c > .c:hover {border:solid 1px green}

Ответ 2

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

Итак, в первом случае .class > class:hover { } и во втором случае .class .class:hover { }

Первый случай: http://jsfiddle.net/wp4Jf/

Второй случай: http://jsfiddle.net/wp4Jf/2

Имейте в виду, что > работает для ie8 +

Ответ 3

Старый вопрос, но для тех, кто приземлился здесь, я решил проблему, переосмыслив html немного, чтобы сделать CSS простым. Это решило мою проблему при создании html/css для вложенных представлений дерева ul/li. Добавление класса элемента div:

<div class="class" >
    <div class="item">Parent</div>

    <div class="class" >
      <div class="item">Child</div>
    </div>
</div>

Затем я могу применить CSS к классу "item", и поскольку элемент не входит в элемент,... внутри элемента,... внутри элемента, селектор hover не каскадирует цепочку node. Таким образом, я покрасил фон своих элементов просмотра дерева при наведении, не разбрызгивая всех родителей.

Ответ 4

Я получил желаемый результат, переработав бит html и используя только css.

HTML:

<div class="wrapper" > 
  <div class="parent"></div>
  <div class="child"></div>
</div>

И CSS:

.wrapper {
  height: 500px;
  width: 500px;
  background-color: lightblue;
  position: relative;
}

.parent {
  height: 250px;
  width: 250px;
  background-color: lightgreen;
  top: 3em;
  left: 3em;
  position: absolute;
}

.parent:hover {
  border: 3px red solid;
}

.child {
  height: 50px;
  width: 50px;
  background-color: lightgrey;
  top: 5em;
  left: 5em;
  position: absolute;
}

.child:hover {
  border: 3px red solid;
}

https://jsfiddle.net/rafaelrozon/pynngjpk/

В основном вместо вложенности divs они могут быть братьями и сестрами, а затем вы можете использовать css, чтобы они выглядели вложенными.

Я надеюсь, что это поможет другим.