html - 将突出显示悬停在分层 div 上

Question

当鼠标悬停在 div 上时，很容易突出显示它。

但是，当 div 位于彼此内部时，父级会遮盖其余的 div。我应该如何告诉 CSS 仅悬停在直接悬停的 div 上？

当我将鼠标悬停在 parrot 上时，我不想突出显示 bird 或 animal。

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
}
div.creature:hover{
  background: #ffeeaa;
}

<div class="creature">
  animal
  <div class="creature">
    mammal
    <div class="creature">
    cat
    </div>
  </div>
  <div class="creature">
    bird
    <div class="creature">
    parrot
    </div>
    <div class="creature">
    duck
    </div>
  </div>
</div>

更新

HTML 代码是动态创建的。因此，首选独立的 CSS。

当我将鼠标悬停在 bird 而不是 parrot 或 duck 上时，我希望整个 bird 都高亮显示。

Answer 1

是这样的吗？

更新:添加了一个 jQuery 函数

$(function() {
    $('div').on('mouseover', function(e){
        e.stopPropagation();
        $(this).addClass('my-bg');
    }).on('mouseout', function(e){
        $(this).removeClass('my-bg');
    })
});

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
}

.my-bg{
  background-color: #ffeeaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="creature">
  animal
  <div class="creature">
    mammal
    <div class="creature">
    cat
    </div>
  </div>
  <div class="creature">
    bird
    <div class="creature">
    parrot
    </div>
    <div class="creature">
    duck
    </div>
  </div>
</div>