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

Obtaining class names with jQuery: A beginner's guide

If we consider an element structured as follows: <div id="dv" class="red green blue">Something Here !!</div> An attempt was made using the following code snippet: alert($('#dv').attr('class')); However, this returned all ...

jquery

Encountering an error with NextJs & Strapi when utilizing the getStaticPaths functionality

Currently, my project involves using Strapi to develop a custom API and NextJs for the frontend. I am experimenting with utilizing getStaticPaths to generate pages based on different categories. In Strapi, I have set up a collection for categories that is ...

javascriptapinext.jsstrapi

Comparison of fields using JQuery validation rules

What is the process to use jQuery validate.js to compare the values of two textboxes? When it comes to a required field, I typically implement something similar to this: <script> $(document).ready(function () { $('[id$ ...

jqueryjquery-validate

Using Vuex in the router: A comprehensive guide

I am having trouble accessing data from the store in the router. I have attempted three different methods, but none of them seem to be working correctly. Here are the methods I tried: // ReferenceError: store is not defined console.log(store.state); // ...

javascriptvue.js

An in-depth guide to effectively unit testing a Node.js Express application

Looking to kickstart unit testing in my Node Express project. What's the most straightforward and convenient approach for this? ...

javascriptnode.jsunit-testingexpress

Improved method for transferring Mongodb query information to Pug

I'm seeking a more efficient method of passing data to my index.js file in a web development application. With only about a month of experience in web development, I acknowledge that this challenge likely stems from my lack of expertise. Here is the w ...

javascriptmongodbexpressmongoosepug

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

While working on my website, I utilized CSS media queries to hide certain elements by using display: none. Even though this effectively hides the element from view, it still lingers in the DOM. Is there a way to completely eliminate the element from the ...

javascriptjquerycss

Retrieve information stored in a component's data variable

After creating a Vue repository using vue init webpack my-app My main.js file looks like this -- // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue fro ...

javascriptvue.jsvuejs2vue-component

Issue with `styles` argument after updating from Material version 4 to 5: MUI

After recently upgrading from Material V4 to V5, I encountered the following error message: MUI: The `styles` argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider ...

javascriptreactjsmaterial-uimaterial-design

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

javascripthtmljqueryajaxdynamic

utilizing the data provided by a user in the "prompt" window within my HTML code

Looking to utilize user input from the prompt window. This is my custom JavaScript form: var answer; function load() { answer=prompt("what is your name?", "Write your name here"); return answer; } function hideNsee() { var HNS = docume ...

javascripthtml

assigning a CSS class to an input element based on a certain condition

My dilemma involves an input field for which I need to conditionally apply a CSS class. For instance, if firstName == undefined, I want to apply the CSS class ng-dirty. To achieve this, I attempted: <input required [(ngModel)]="customer.firstName" nam ...

cssangularjs

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

javascripthtmlangularjsformsmodel-view-controller

Discovering error messages in Django can be made easier through the

Hey there, I'm currently working on a Django website that utilizes jQuery for its AJAX calls. The issue I'm facing is that when one of the AJAX calls fails with a '500 ERROR' from Django, the Response header indicates 'text/plain& ...

jqueryajaxdjangorequest

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

htmlcssbuttonbootstrap-4

Here is a unique version: "In Javascript, users can trigger the function this.Something() from within this.img.onload by

I have some code that looks like this... Thing function () { var img = new Image; DoSomeStuff function() { //Code here that relies on my image being loaded... }; InitMe function(src) { this.img.onLoad = this.DoSomeStuff; ...

javascript

Using a CSS nth-child selector to eliminate the bottom margin of the final row

As I work on creating lists that are displayed in columns of two, each .customer-review-container includes a margin-bottom CSS property like this: <div class="col-md-6"> <div class="customer-review-container"> </div> <!-- en ...

htmlcssmargincss-selectors

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

javascriptreactjs

Image gradually disappears after being loaded via ajax request

I am trying to achieve a fade-in effect for images after they have been loaded following an ajax call. The goal is to make the fade-in occur smoothly, rather than having the user observe the image loading process. Is there anyone who can assist me with ...

javascriptjqueryajaxload

Mongodb will provide the previous collection

router.post('/orders/finish', function(req, res, next) { var order_id = req.body.order_id; var user_id = req.body.user_id; var table_id = ''; var result = []; mongo.connect(url, function(err, db) { assert.equal(null, err); ...

javascriptnode.jsmongodbexpressmongoose