Mastering the art of using wildcards in CSS can help you harness the power of recognizing attributes

I am facing a situation where I have an HTML table with numerous cells, some of which are assigned classes like hov1, hov2, ..., hov42, ..., all the way up to hov920.

This is a compact table where the darker green cells (hov1) change when hovered over while the light green ones (hov2) remain unaffected (this behavior is executed via JavaScript and performs well unless the table grows in size).
https://i.sstatic.net/gJzz8.png

...
<td class="hov0" style="background-color: rgba(0, 200, 0, 0.1);">AA</td>
<td">00</td>
<td class="hov2" style="background-color: rgba(0, 200, 0, 0.1);">BB</td>
<td class="hov2" style="background-color: rgba(0, 200, 0, 0.1);">CC</td>
...

I am aware that I can use CSS wildcards to apply a hover effect to all classes containing hov. However, I only want specific classes to be affected by hovering and not all hov-classes. Is there a way to further filter out numbers so that only hov1 or hov42 trigger the hover effect in CSS? As far as I know, there are only two potential solutions:

CSS (potentially not ideal):

hov1:hover, hov2:hover, hov3:hover ... hov99:hover {
  background: rgba(0, 200, 0, 0.5);
}

jQuery (highly resource-intensive, crashes my browser):

$(this).addClass("hov" + x);
$(this).hover(function(e) {
  $(".hov" + x).css("background-color",e.type === "mouseenter"?"rgba(0, 200, 0, 0.5)":"rgba(0, 200, 0, 0.1)")
})

Are there any other alternatives to address this complex issue?

javascripthtmljquerycsscss-selectors

Answer №1

If you want to activate the hover effect on all elements with the same class while keeping your CSS code clean and concise, you can achieve this by utilizing the class attribute of the currently hovered element to target all elements with that specific class:

$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});


$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});
th {
  background: lightblue;
}

th, td {
  padding: 5px 10px;  
}

[class^="linked"].hovered {
  background: rgba(0, 200, 0, 0.5);
}

[class^="linked"] {
  background: rgba(0, 200, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>00</th>
      <th>01</th>
      <th>02</th>
      <th>03</th>
      <th>04</th>
      <th>05</th>
      <th>06</th>
      <th>07</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="linked1">00</td>
      <td class="linked1">6D</td>
      <td class="linked2">64</td>
      <td class="linked1">74</td>
      <td class="linked1">4D</td>
      <td class="linked1">6F</td>
      <td class="linked2">20</td>
      <td>2B</td>
    </tr>
    <tr>
      <td class="linked1">2F</td>
      <td class="linked2">76</td>
      <td class="linked1">30</td>
      <td>73</td>
      <td>0D</td>
      <td class="linked1">0A</td>
      <td class="linked2">C2</td>
      <td class="linked3">00</td>
    </tr>
  </tbody>
</table>

Answer №2

Feel free to add multiple classes to your element for easier filtering.

When using wildcards, aim for specificity to target elements accurately.

div[class*="colored"] {
  background: yellow;
}

div[class*="colored"]:hover.should-flash {
  background: red;
}
<div class="colored1 should-flash">1</div>
<div class="colored2">2</div>
<div class="x">4</div>
<div class="colored3 should-flash">3</div>

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

Tips for correcting boolean checks and verification for undefined variables

Currently, I am working on a code where I need to verify the truthfulness of variables $scope.bankregel and $scope.showInvoices. Within my function, I'm already implementing a conditional check in the if and else if statements. How can I incorporate ...

jqueryangularjs

Interacting with HTML5 canvas using object events

How can I assign an event handler to an element created on the HTML5 Canvas without having to manually track specific coordinates? ...

htmlcanvas

Can Express not use await?

Why am I encountering a SyntaxError that says "await is only valid in async function" even though I am using await inside an async function? (async function(){ 'use strict'; const express = require("express"); const bodyParser = ...

javascriptnode.jsexpressecmascript-6

Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul? body {margin: 0} ul { width: 1000px; margin: 0 auto; padding: 0; list-style-type: none; margin-top: 30px; overflow: hidden; background-color: # ...

htmlcsshtml-listslistitem

Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

I'm aiming to create an animated effect using jQuery that replicates the motion in this GIF. I experimented with CSS3 animation keyframes, but the result was not as clean and polished as I would like. If there is a simpler way to achieve this effect u ...

jquerycss

Is there a way for me to display the comment count as text directly on the comment bubble image?

In this example on jsfiddle, I am attempting to display the number of comments (12 in this case) as text over the comment bubble image: http://jsfiddle.net/c337Z/ HTML: <ul id="top"> <li><a href="/comments"><div id="commentlink" ...

htmlcss

Present the outcome in the specified location

I need to quickly test my code and display the result in a specific area. There's a button that should trigger something to be displayed when clicked. Right now I'm just using an alert for testing purposes. $(document).ready(function () { ...

jquerycss

After adding on, do you wish to eliminate?

I have implemented zoom buttons on my Map container However, I need to hide these zoom buttons when a specific map image is displayed Code: JS: Map = function() { //private: var $MapContainer; this.initMap = function($container, zoomHidden) { $Map ...

javascriptjqueryappend

Using CSS and Semantic UI CDN may encounter issues when testing in a localhost environment

My website's html code is structured as shown below, and the directory path is correct: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < ...

javascripthtmlcsssemantic-ui

What is the best way to access the data stored within a Promise object in a React application?

Below is the snippet of my code that handles parsing application data: async function parseApplication(data: Application) { const fieldGroupValues = {}; for (const group of Object.keys(data.mappedFieldGroupValues)) { const groupValue = data.mappedF ...

javascriptreactjstypescriptparsingpromise

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

Tips for implementing ng-click to work with the function result in href

Is there a way to pass the result of the ng-click function into the href attribute? Let's say I have: <a href="{{value}}" target="_blank" ng-click="myFunction()">Click Here</a> Where myFunction() dynamically generates a unique link from ...

javascripthtmlangularjs

What is the best way to apply styling to a kendo-grid-column?

Utilizing the kendo-grid in my project serves multiple purposes. Within one of the cells, I aim to incorporate an input TextBox like so: <kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column> It is ...

cssangularkendo-grid

Step-by-step guide on removing the focusin event listener from a Bootstrap 5 modal

My current app has a legacy modal that uses a kendo dropdown list element bound to an ajax call with filtering. I'm trying to avoid rewriting this component if possible. However, there is an issue where when the modal opens and you focus on the dropdo ...

javascriptbootstrap-5bootstrap5-modal

A guide to fetching MongoDB data and presenting it in a table with ReactJS

I’m currently facing an issue while trying to display data from my MongoDB database in a table using ReactJS. Instead of getting the expected outcome, all I see is an empty result on the webpage along with some errors shown in the browser console. https ...

javascriptreactjsmongodb

Improprove Your Website's Speed with Google PageSpeed Insights and Multiple JavaScript Files

Currently, I am working on optimizing my website according to Google's PageSpeed Insights recommendations. One of the suggestions is to "Remove Render-Blocking JavaScript" for a few files (for simplicity, let's call them 1.js, 2.js, and 3.js). T ...

javascriptpagespeed

What is the best way to make curved lines in CSS without relying on an image?

Seeking to design a website featuring numerous curved lines and borders, as shown in the linked images. Utilizing Vue to ensure consistent appearance across both desktop and mobile platforms without relying on image files unless necessary. Visualization ...

htmlcssvue.js

I am encountering an issue where my useState value is coming back as undefined after I fetch data. It appears that the useState hook is

import React, { useEffect, useState } from 'react'; function MainContent() { const [objectsArr, setObjectsArr] = useState(null); useEffect(() => { async function fetchData() { let response = await fetch('http ...

javascriptreactjsreact-hooksfetch-api

Having trouble with Bootstrap 5 sticky-top functionality within a container?

Why is my <nav> not sticking to the top of the viewport when scrolling, even though it has the .sticky-top class? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <meta name="viewport" content="wi ...

csstwitter-bootstrapbootstrap-5

Adjust the text within the paragraph dynamically according to the option chosen in the drop-down menu using

I'm having trouble updating a paragraph in a letter based on the user's selection from a dropdown menu. I can't seem to figure it out. I don't know whether ng-show/hide or ng-options is the best approach for this. I feel completely los ...

javascripthtmlangularjsng-options