Best practices for styling highlighted text when hovered over using CSS

Question

Best practices for styling highlighted text when hovered over using CSS

Here is a link to the codepen in question: https://codepen.io/dvreed77/pen/yrwjoM.

I am trying to highlight specific text with a large line gap and maintain the hover effect consistently when hovering over individual blocks of text. Currently, the highlight flashes rapidly on-off-on when moving over the whitespace between lines.

I have attempted adjusting the height and other properties, but nothing seems to solve the issue and I am a bit stuck.

The relevant CSS code can be found below:

div {
  width: 90%; /* Adjusted for styling */
  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 augu.... (The code has been truncated for brevity)
  <span> Vestibulum ut ultricies neque.</span>
</div>

html css

Answer 1

Answer №1

In this method, a clever hack using pseudo elements is employed to expand the hoverable area of a span and cover the space between the lines.

div {
  width: 90%; /* Adjusted to fit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /* Relative to the div, 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;
  /* Do not set any top and bottom value! */
  left:0;
  right:0;
  height:100vh; /* a large height */
  z-index:-2;
}
/* Make the pseudo element appear on top of all 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 augu...

Another approach involves utilizing vertical padding (that doesn't impact the layout) combined with background-clip.

div {
  width: 90%; /* Adjusted to fit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /* Relative to the div, 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:1em 0; /* Increase the clickable area */
  background-clip:content-box; /* Show background only within 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 ...

Answer 2

In this method, a clever hack using pseudo elements is employed to expand the hoverable area of a span and cover the space between the lines.

div {
  width: 90%; /* Adjusted to fit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /* Relative to the div, 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;
  /* Do not set any top and bottom value! */
  left:0;
  right:0;
  height:100vh; /* a large height */
  z-index:-2;
}
/* Make the pseudo element appear on top of all 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 augu...

Another approach involves utilizing vertical padding (that doesn't impact the layout) combined with background-clip.

div {
  width: 90%; /* Adjusted to fit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /* Relative to the div, 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:1em 0; /* Increase the clickable area */
  background-clip:content-box; /* Show background only within 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 ...

Answer 3

Answer №2

One possible solution could be implementing scaffolding.

.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>

Another alternative is utilizing borders that match the background color, although this may require finding a suitable border width to match the font size and ensuring no space between tags in the markup.

* {
  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 4

One possible solution could be implementing scaffolding.

.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>

Another alternative is utilizing borders that match the background color, although this may require finding a suitable border width to match the font size and ensuring no space between tags in the markup.

* {
  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 5

Answer №3

To achieve this effect, you can utilize the CSS transition property. Specifically, you can set a transition delay on mouseout while having no delay on hover.

During hover, the background will change instantly; however, when the mouse is moved away, the background transition will take a specified duration (e.g., 1 second, 1.25 seconds, or 2 seconds) to occur. If the user moves to another area before the transition completes, the background color will remain unchanged, fulfilling your desired outcome.

The key lies in implementing the following 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 */
}

<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 6

To achieve this effect, you can utilize the CSS transition property. Specifically, you can set a transition delay on mouseout while having no delay on hover.

During hover, the background will change instantly; however, when the mouse is moved away, the background transition will take a specified duration (e.g., 1 second, 1.25 seconds, or 2 seconds) to occur. If the user moves to another area before the transition completes, the background color will remain unchanged, fulfilling your desired outcome.

The key lies in implementing the following 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 */
}

<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>

Best practices for styling highlighted text when hovered over using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Tips for switching back and forth with JQuery

When attempting to click the submit button, the action of submitting a form using jQuery/AJAX is not functioning as expected

Show validation error messages for radio buttons alongside images in a single row

What is the best way to animate a three.js object to the right using GSAP without obstructing the surrounding HTML text?

The tabs in bootstrap appear to be functioning properly, but the data is not displaying as expected

Vue component updating its model only upon input element losing focus

The row containing a list of inline elements cannot be cleared in Safari due to the ineffectiveness of the

Issue with SVG marker not functioning properly when hovered over

the failure of the second function to execute

Distance from the border

Is there a solution to move my navbar that is frozen halfway on the screen?

Choose the section of the date input that represents the day

Morris bar adjusts size when printing

Unable to change Gutters to 0 in the .container-fluid class in Bootstrap 5.2

Creating a Dynamic Navigation Bar with HTML and CSS

Creating a unique SVG pattern starting from the center

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

The issue with displaying Infogram embed code in a React application

Position the Figcaption over the Image