Как мога да използвам hover в дете, без да е активирано hover на родителя?

Ако задържите курсора на мишката върху дъщерен елемент, вие също задържате курсора на мишката върху родителя, няма начин да се заобиколи това.

Това, което можете да направите, е да зададете различен или допълнителен клас на 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> тагове

Следната конструкция показва поведението, което OP би искала да види:

<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>