悬停效果对一个段落中的两行无效

Question

我有一个包含两个<p>的{​​{1}}， 我希望其中一个向右浮动，每个都在一条线上（由<span>实现）。

在悬停时，它们都应突出显示，因此我在周围的display:block上添加了:hover。

但是，只有一个<p>会突出显示。

为什么呢？我该如何改变呢？

https://jsfiddle.net/o8wk7n8t/

谢谢

Answer 1

在使用.parent时，使用overflow: hidden设置float的布局。

.parent {
  overflow: hidden;
}

.parent {
  overflow: hidden;
}
.parent:hover {
  background-color: red;
}

.right {
  float:right;
}

.left,
.right {
  display: block;
}

<p class="parent">
 <span class="left">Hi</span>
 <span class="right">Ho</span>
</p>