Question

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

然而，当div s在彼此内部时，父亲对div的其余部分进行着色。我应该如何告诉CSS只悬停在直接悬停的parrot上？

当我将鼠标悬停在bird上时，我不希望突出显示animal或div.creature{ margin:5px; padding:5px; border: 1px solid; } div.creature:hover{ background: #ffeeaa; }。

＆＃13;

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

＆＃13;

bird

＆＃13;

更新

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

当我将鼠标悬停在parrot上而不是duck或bird时，我希望整个states = ["A","B","C","D"] priors = {"A": 1.0, "B": -1.0, "C": 0, "D": 0} values = ((item[0], item[1]*-1) for item in priors.items() if item[0] in states) print max(values, key=lambda i:i[1])突出显示。

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>

Answer 2

这是我能得到的尽可能接近。我使用了:nth-of-type

剩下的问题是，当其中一个孩子处于:hover状态我不认为 CSS支持时，关闭父背景，因为它doesn't have parent selectors

用JS

来解决这个问题应该不会太难

div.fruit {
  margin: 5px;
  padding: 5px;
  border: 1px solid;
  background:white; /* otherwise the divs have no background */
}

.fruit:hover {
  background: red;  /* Main parent div  */
}

.fruit > div:nth-of-type(1):hover {
  background: blue; /* First child div */
}

.fruit > div:nth-of-type(1):hover > div:nth-of-type(1):hover {
  background: green; /* First grandchild div */
}

.fruit > div:nth-of-type(2):hover {
  background: yellow; /* second child div */
}

.fruit > div:nth-of-type(3):hover {
  background: orange; /* third child div */
}

<div class="fruit">A1
  <div class="fruit">AA1
    <div class="fruit">AAA1</div>
  </div>
  <div class="fruit">AA2</div>
</div>

Answer 3

他们正在做你想要的。你只是忘了在它们上面设置背景颜色，所以它们显示在下方的div中。这是一个证明这一点的小提琴：

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

https://jsfiddle.net/shavedave1/ucvvcrer/1/

悬停突出显示分层div

3 个答案: