css - 鼠标悬停时如何修复元素的选择

Question

我需要创建多个 <span>在多行上，并使它们在鼠标悬停时改变颜色。

这是我的代码的一个简单示例:

<div class="example"><span class="text">BIG TEXT 1</span></div>
<div class="example"><span class="text">BIG TEXT 2</span></div>
<div class="example"><span class="text">BIG TEXT 3</span></div>

当我将鼠标移到文本上时出现问题，它们与选择区域重叠，但不会出现在文本周围。为了让您更好地理解，当我的鼠标位于“TEXT 1”的下半部分时，选择从“TEXT 1”变为“TEXT 2”，但仅高于书面。

我希望我已经提供了足够的信息。

这是我的 fiddle :https://jsfiddle.net/DWryan/3fbc049s/1/

对不起我的英语。坦克和问候。

Answer 1

.example {
  display: inline-block;
	width:100%;
  text-align: center;
  color: black;
  background-color:white;
  cursor:pointer;
}

.example:hover {
  color: white;
  background-color: black;
}

.text {
  display: inline-block;
  font-size: 100px;
  line-height: 1.3;
}

<div class="example">
  <span class="text">BIG TEXT 1</span>
</div>
<div class="example">
  <span class="text">BIG TEXT 2</span>
</div>
<div class="example">
  <span class="text">BIG TEXT 3</span>
</div>

我将 line-height 更改为更标准的东西，并省略了度量单位。通常度量单位不包含在行高中，因为它是从行高 * 字体大小派生的。

/* 无单位:使用这个数字乘以元素的字体大小 */