CSS跨越跨度内的跨度而不正确应用效果。

Question

给出以下html：

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

如果我希望每个单独的标签在我悬停在它们上方时会改变颜色，我不确定如何让它们相互独立地悬停。

如果我将鼠标悬停在tag2上，我在技术上也会悬停在tag1上，因为它包含tag2，因此当我只希望tag2在该实例中更改颜色时，两者都会改变颜色。有没有办法我可以做到这一点，而不是让它们非嵌套？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;