Как я могу использовать зависание в дочернем элементе без активации родительского зависания?

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

Что вы можете сделать, так это установить другой или дополнительный класс для 1-го дочернего элемента, у которого нет других дочерних элементов.

Подсветка цветов фона во вложенных блоках при наведении

Если вы пытаетесь активировать фоновые цвета вложенных блоков div, я думаю, вы ищете следующее.

Для HTML используйте разные имена классов для идентификации каждого слоя вложенных div блоков:

<div class="Group">root
    <div class="Group1">1st child
        <div class="Group2">2nd child
            <div class="Group3">3rd child</div>
        </div>
    </div>
    <div class="Group1">1st child</div>
</div>

и CSS:

.Group, .Group1, .Group2, .Group3 {
    background-color:transparent;
}
.Group:hover {
    background-color:yellow;
}
.Group1:hover {
    background-color:pink;
}
.Group2:hover {
    background-color:red;
}
.Group3:hover {
    background-color:orange;
}

Демонстрационная скрипта: http://jsfiddle.net/audetwebdesign/Scr9G/

Когда вы последовательно наводите курсор на каждую вложенную div, цвет фона последовательно меняется.

Если вы пытаетесь настроить таргетинг на вложенный элемент с помощью :hover без эффекта, всплывающего через родительские/предковые блоки, вам потребуется использовать JavaScript/jQuery для создания необходимых правил выбора.

Причудливый хак с использованием тегов <p>

Следующая конструкция демонстрирует поведение, которое хотел бы видеть ОП:

<p class="Group">root
    <p class="Group">1st child
        <p class="Group2">2nd child
            <p class="Group">3rd child</p>
        </p>
    </p>
    <p class="Group">1st child</p>
</p>

и CSS прежний:

.Group {
    background-color:white;
}
.Group2 {
    background-color:white;
}
.Group:hover {
    background-color:yellow;
}
.Group2:hover {
    background-color:red;
}

Вторая демонстрационная скрипта: http://jsfiddle.net/audetwebdesign/cf2mn/

В этом случае OP пытался вложить теги <p>, которые на самом деле не работают, как вложение других элементов блока, таких как <div>.

При использовании тегов <p> закрывающий тег </p> является необязательным, если за ним следуют другие элементы потока, такие как p, div, ul и так далее.

В этом случае показанный выше фрагмент HTML эквивалентен следующему:

<p class="Group">root</p>
<p class="Group">1st child</p>
<p class="Group2">2nd child</p>
<p class="Group">3rd child</p>
<p class="Group">1st child</p>

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

Если бы теги div использовались вместо тегов p, результирующий DOM продемонстрировал бы отношения родитель-потомок, а CSS показал бы исходное поведение, которого не хотел OP.

Использование тегов p может дать желаемый эффект для CSS, но это работает только потому, что элементы DOM являются одноуровневыми, а не родительско-дочерними. (Кроме того, вложенные теги p не будут проверяться.)

Стоит отметить, что:

CSS 2.1 не определяет, находится ли родитель элемента, который является ':active' или ':hover', также в этом состоянии.

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

Ссылки:

О :hover: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

О необязательном закрытии тега p: http://www.w3.org/TR/html-markup/p.html#p

Невозможно запретить родительским элементам получать цвет фона. Вместо этого используйте этот код

<div class="root">
Main Root
<div class="group">
    First One
</div>
<div class="group2">
    Second One
</div>
<div class="group">
    Third One
</div>

.group:hover {
    background: yellow;
}
.group2:hover {
    background: red;
}

SEE THE DEMO HERE

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

Самый простой и лучший способ — использовать любой другой элемент, например li.

CSS:

.Group, .Group2, .Group3
{
background:white;
display: block;
list-style: none;
}
.parent
{
margin: 0;
display: block;
padding: 0;
}
.Group:hover
{
background: yellow;
}
.Group2:hover
{
background: red;
}
.Group3:hover
{
background: yellow;
}

HTML:

<ul class="parent" >
<li class="Group" >root
  <li class="Group">1st child
    <li class="Group2">2nd child
      <li class="Group3">3rd child</li>
    </li >
  </li >
  <li class="Group">1st child</li >
</li>
</ul>

Вы должны добавить подэлемент для контента и использовать псевдоселектор element+element.

.group-content:hover {
  background-color: yellow;
}

.group-content:hover + .group {
    background-color: red;
}

<div class="group">
  <div class="group-content">1st child</div>
  <div class="group">
    <div class="group-content">2nd child</div>
    <div class="group">
      <div class="group-content">3nd child</div>
    </div>
  </div>
</div>
<div class="group">
  <div class="group-content">1st child</div>
</div>