html - CSS 悬停在跨度内的跨度上，无法正确应用效果。

Question

给定以下 html:

<span class="tag1">cars<span class="tag2">sports</span></span>

如果我希望每个单独的标签在我将鼠标悬停在它们上面时改变颜色，我不确定如何让它们彼此独立地悬停。

如果我将鼠标悬停在 tag2 上，从技术上讲，我也将鼠标悬停在 tag1 上，因为它包含 tag2，所以两者都会改变颜色，而我只希望 tag2 在该实例中改变颜色。有没有办法在不使它们非嵌套的情况下做到这一点？

Answer 1

您正在寻找以下解决方案吗？链接到 JSfiddle: https://jsfiddle.net/5v3hpfjo/

.parent,.child 
{
  float: left;
}
.parent span:hover
{
  background-color: pink;
}
.child span:hover
{
     background-color: gold;
}

  <div class="parent">
    <span>
      cars
    </span>
  </div>
  <div class="child">
    <span>
      sports
    </span>
  </div>