Cover any HTML element with a translucent overlay box

I have a unique problem with an HTML file that is out of my control when it comes to its content. My only option is to inject a CSS file and/or JavaScript (potentially using libraries like jQuery) into the mix.

Within this HTML, there are elements that require highlighting and tooltips added to them. These elements may not be conveniently grouped in specific containers for easy styling. They could be <span>, <a>, <img>, <div>, or any other type of element (inline or block).

While my preference is to use pure CSS to solve this challenge, I am open to utilizing JavaScript to manipulate the Document Object Model if necessary. However, the end result must maintain the same layout as the original HTML, with just the highlights floating over the specified elements.

For instance, if the original HTML looks like this:

<body>
    <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p>

    <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p>
</body>

The desired outcome would resemble something like this:

javascriptjqueryhtmlcss

Answer №1

Here's a CSS-only solution as per your request, no changes in HTML needed.

  • *[data-highlight="true"]
    - targets all elements with the attribute data-highlight="true"

  • background: rgba(255, 0, 0, 0.5) - sets a background color with 50% opacity using rgba values.

Important Note

If there are specific CSS rules applied to certain elements, adjustments might be required. For instance, if a <span> element already has position: absolute, changing its position value to relative may not be possible, and you'd need to override the specific rule accordingly.

Snippet

*[data-highlight="true"] {
  position: relative;
}

*[data-highlight="true"]:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 0, 0, 0.5);
  border: 1px solid red;
}
<body>
  <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p>

  <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent Cookie Access from AJAX REST Request in JavaScript

We are in the process of developing a mobile application using web technology. Our endpoint (weblogic 11g) sends both a jessionid cookie and a _wl_authcookie_jessionid_ cookie which are automatically sent back to the server for authentication purposes. How ...

jquerymobilecookiesangularjsweblogic

The alignment of the horizontal menu items is off

Currently, I am working with asp.net and dealing with a horizontal menu issue. The alignment problem arises where the right side of Menu B appears higher than the left one (Menu A). I have included my code below for reference. Any suggestions or assistance ...

htmlcssalignment

Issue: Undefined onClick function for HTML when using Node.js, NPM, and Parcel

I am currently working on a weather application using Node.js, NPM, and Parcel for development. To ensure OpenLayers functions properly, I need to incorporate these technologies, even though I'm not very familiar with them. One key aspect of my proje ...

javascriptnode.jsinputnpmparceljs

Determine if Param is empty or not within the context of express.js

I am looking to create a table and populate it with all the parameters that are not empty in the parameter list provided below: http://localhost:5002/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="407535732b7008121931190539142 ...

javascriptnode.jsexpress

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview

Add the element to a fresh collection of objects using an associative array

Can you help me figure out what's causing an issue when attempting to add a new element to an associative array of objects? var storeData3 = [ { 'key1' : 'value1' }, { 'key2' : 'value2' }, { 'key3&ap ...

javascriptjson

Issue with binding classes dynamically in vue with svg elements

I'm attempting to create a custom typing program for one of my students using SVG to display the words and class binding with Vue.js. The goal is to change the color of the characters when the correct key is pressed by the user. However, I've enc ...

javascriptvue.jssvg

The compatibility between Javascript and AJAX functions is currently not functioning as expected

I am attempting to send some data to the server using AJAX with the value obtained from a JavaScript variable. Here is the code snippet: <script type="text/javascript> var url; function applyPhoto(_src) { url = _src; var pho ...

phpjavascriptjqueryajax

Beautiful image gallery in jQuery Mobile version 1.1.1

Despite PrettyPhoto displaying individual images, the gallery feature is not functioning properly. The code snippet below shows how the image is being rendered on the browser: <a href="/images/reviews/full/2/ii_15986_1429535345455.jpg" data-rel="pretty ...

jqueryjquery-mobileimage-galleryprettyphoto

Obtain a value from a jQuery POST request

Is it possible to dynamically set the width of a table using a Javascript variable obtained from a jQuery post? $.post("get.php", {this: 'that'}, function(data){ var width = data // for example, '300' ? How can I utilize this variabl ...

jquerypost

Sinon causing 'unsafe-eval' error in Chrome extension unit tests

Recently, I've been conducting unit tests on my Chrome extension using Mocha, Chai, and Sinon. However, I encountered an issue when attempting to stub an object from a method: EvalError: Refused to evaluate a string as JavaScript because 'unsafe ...

javascriptunit-testinggoogle-chrome-extensionsinonsinon-chai

Create a dynamic onClick event script and integrate it into Google Optimize

I need to incorporate a button element into my website using Google Optimize for an experiment. This button needs to trigger a specific script depending on the variation of the experiment. I have attempted two different methods: <button id="my-button" ...

javascripthtmldynamic-htmldynamic-script-loadinggoogle-optimize

Determining when all $http requests have completed in AngularJS

After running multiple $http calls, I need to trigger an event only when all of them have been processed. Additionally, I must be informed if any call has failed along the way. Despite attempting solutions found on stackoverflow, such as using an intercept ...

javascriptangularjshttp

What is the proper way to implement JQuery within a constructor function contained in a JavaScript namespace?

Yesterday I ran into a problem when asking about using JQuery inside a JavaScript constructor function within a namespace. There was a bug in my code that caused me to get the answer to the wrong question. var NS=NS||{}; NS.constructor=function() { t ...

javascriptjquerynamespaces

Unspecified outcome of Ajax array as a choice in Select

I'm fairly new to working with AJAX / JSON and I'm having trouble figuring out how to parse an AJAX array response into a <select> dropdown. Despite going through several online tutorials and attempting different approaches to return the r ...

javascriptjqueryajax

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

Avoid the resetting of chosen value following a POST or submission

I am currently working on creating a "web dashboard" that requires a year_from parameter from an HTML form. Despite setting up my Flask backend to return data within this specified range, I am encountering a problem where every time I hit submit, the selec ...

htmlajaxflask

The component I created seems to be having trouble recognizing the Slickr CSS that was

I have included Sick carousel's CSS in the root component by importing it like this: import React from 'react' import PropTypes from 'prop-types' import { ThemeProvider } from 'styled-components' import { ...

cssreactjsnext.jsslick.jsreact-slick

Changing states in next.js is not accomplished by using setState

Struggling to update the page number using setCurrentPage(page) - clicking the button doesn't trigger any state change. Tried various methods without success. Manually modified the number in useState(1) and confirmed that the page did switch. import ...

javascriptreactjsnext.js