Proper CSS for highlighted text with hover

Question

Referencing this codepen: https://codepen.io/dvreed77/pen/yrwjoM.

I want to highlight some text while having the large gap between lines, and keep the hovering event

Answer 1

You can also use CSS transition property to make this happen. Specifically, you introduce a transition delay on mouseout but no delay on hover.

SO... what will happen is that on hover the background will change, but on mouseout it takes a full second (or 1.25s or 2s or etc) for the background transition to kick-in. IF the user moves onto another span, the background change will be over-ridden/cancelled (so to speak), keeping the background color unchanged. The end result is exactly what you have requested.

The magic here is to add both of these CSS directives:

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 */
}

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