正确的CSS可以将光标悬停在突出显示的文本

Question

引用此代码笔：https://codepen.io/dvreed77/pen/yrwjoM。

我想突出显示一些文本，同时使行之间有较大的间隔，并在将鼠标悬停在单个文本块上时保持悬停事件恒定。现在，当您碰到两行之间的空白时，它会快速地开关。

我尝试设置高度和其他一些东西，但是没有一个可以解决这个问题，我有点迷失了。

下面也引用了代码

div {
  width: 90%; /* Adjusted to suit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
}

span {
  height: 2em;
  background: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
}

span:hover {
  background: rgba(255, 0, 0, 0.5);
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>

Answer 1

我唯一想到的解决方案是使用脚手架

.main {
  width: 20%;
  margin: 0 auto;
  line-height: 2;
  border: 1px solid;
}

span {
  height: 2em;
  background: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
  border: 1px solid;
}

.scaffolding:hover>span {
  background: rgba(255, 0, 0, 0.5);
}

<div class="main">
  <div class="scaffolding "> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span></div>
  <div class="scaffolding "> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span></div>
  <div class="scaffolding "> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span></div>
</div>

---

或边框与背景匹配，问题是您必须找到边框宽度以匹配文本的字体大小，并且标记中的标记之间不应有空格

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  width: 90%;
  margin: 0 auto;
  line-height: 2;
}

span {
  background: rgba(255, 0, 0, 0.2);
  border: 8px solid #fff;
}

span:hover {
  background: rgba(255, 0, 0, 0.5);
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span><span>Suspendisse eu augue lectus.</span><span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span><span>Donec semper sodales lacus vel consequat.</span><span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span><span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span><span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span><span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span><span>Nullam et vestibulum neque.</span><span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span><span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span><span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span><span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span><span>Donec vehicula odio nec ullamcorper ornare.</span><span> Vestibulum ut ultricies neque.</span>  
</div>

Answer 2

这是使用伪元素的 hack ，其思想是增大跨度的可悬停空间并覆盖线之间的区域。

div {
  width: 90%; /* Adjusted to suit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /*relative to the div and not the span !*/
  z-index:0;
  overflow:hidden; /*hide the overflow of the pseudo element*/
}

span {
  background: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
}

span:hover {
  background: rgba(255, 0, 0, 0.5);
}
span:before {
  content:"";
  position:absolute;
  /* Don't set any top and bottom value! */
  left:0;
  right:0;
  height:100vh; /* a big height*/
  z-index:-2;
}
/*make the pseudo element on the top of all the others on span hover*/
span:hover:before {
  z-index:-1;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>

这是另一个依靠垂直填充（不影响布局）和background-clip的想法：

div {
  width: 90%; /* Adjusted to suit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /*relative to the div and not the span !*/
  z-index:0;
  overflow:hidden; /*hide the overflow of the pseudo element*/
}

span {
  background-color: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
  padding-bottom:1.5em; /*we increase the area*/
  background-clip:content-box; /*we show background only on content*/
}

span:hover {
  background-color: rgba(255, 0, 0, 0.5);
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>

Answer 3

您也可以使用CSS transition属性来实现这一点。具体来说，您会在鼠标移开时引入过渡延迟，但在悬停时不会延迟。

所以...将会发生的情况是，悬停时背景会发生变化，但是在鼠标移开时，背景过渡到插入需要整整一秒钟（或1.25s或2s等）。 如果用户移动到另一个跨度，则背景更改将被覆盖/取消（可以这么说），使背景颜色保持不变。最终结果正是您所要求的。

这里的妙处在于添加这两个CSS指令：

span      {transition:background-color 0s ease-out 1s;} /* 1s delay on mouseout */
span:hover{transition:background-color 0s ease-out 0s;} /* No delay on hover */

div {
  width: 20%;
  margin: 0 auto;
  line-height: 2;
}

span {
  height: 2em;
  background: rgba(255, 255, 0, 0.2);
  vertical-align: middle;
  transition: background-color 0s ease-out 1s; /*  1s delay on mouseout */
}

span:hover {
  background: rgba(255, 0, 0, .5);
  transition: background-color 0s ease-out 0s; /*  No delay on hover */
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>