javascript - 如何水平扩展内联跨度的可点击区域？

Question

我有两个跨度，都在单击时触发一个 Action :

<div>
    <span>This is a multiline<br/>
    chunk of text.</span>  <span>And this is a <br/>
    second one.</span>
</div>

我希望用户能够单击包含的 div(其样式看起来像一个框)中的任意位置，并将单击与一个或另一个 span 相关联。现在，用户必须点击实际文本才能触发点击事件。

它是这样的:http://jsfiddle.net/bJJLF/1/ .

我希望跨度看起来像一个段落(即，所以我可能需要保持它们的样式 display: inline )。会有换行符，但我很灵活:它们是如何创建的(所以我可以在必要时杀死 </br> s)。

是否有一个我缺少的简单的 css 解决方案，或者我是否必须在周围的框上放置一个点击处理程序并进行坐标计算以确定点击属于哪个跨度？

Answer 1

好的，所以我找到了一个到目前为止看起来还不错的纯 css 解决方案。任何改进它的建议都会有所帮助。现在的主要约束是您需要知道包含框的宽度，这是我可以处理的约束。

想法是在 span 上创建一个绝对定位的伪前元素。你给它一个比 span 低的 z-index，你将它的高度设置为 span 高度的 100%，将 left 设置为 0，宽度等于容器的宽度:

span:before {
  content: '';
  display: inline-block;
  z-index: 1;
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0px;
}

跨度必须相对定位:

span {
  z-index: 2;
  position: relative;
}

这是更新后的示例(现在带有悬停效果!):http://jsfiddle.net/bJJLF/7/