Creating a hover effect in CSS that applies to neighboring elements with similar attributes

My table is created using a struts2 iterator and has variable length and content. It looks something like this:

<table>
    <tr class="odd" machineId="1" parameterId="1"><td></td></tr>
    <tr class="even" machineId="1" parameterId="2"><td></td></tr>
    <tr class="odd" machineId="1" parameterId="3"><td></td></tr>
    <tr class="odd" machineId="2" parameterId="4"><td></td></tr>
    <tr class="even" machineId="2" parameterId="5"><td></td></tr>
    <tr class="odd" machineId="3" parameterId="10"><td></td></tr>
    <tr class="noParameters" machineId="4"><td></td></tr>
    <tr class="odd" machineId="6" parameterId="8"><td></td></tr>
    <tr class="odd" machineId="7" parameterId="9"><td></td></tr>
</table>

What I need is the following:

  1. Rows should change color when hovered over.
  2. Rows with the same machineId as the hovered row should have a different color.
  3. All other rows should maintain their default color.

I am looking to achieve this using only CSS, without relying on SASS. The solution should be compatible with major browsers including IE11 (and preferably IE9).

The current implementation of the page uses Javascript with Dojo 1.3 to add custom classes on hover, but I want to explore a CSS-only solution first. If necessary, I can update the code to use Dojo 1.9 as a fallback option.

Is it possible to achieve this desired behavior purely with CSS?

cssjsphtml-tablehover

Answer №1

The solution to your question is that achieving this with only css is not possible, due to the constraints of the selector ~ which only checks forwards and requires a separate css rule for each machineId (refer to jsfiddle.net/bb12otk4, credits to 'I haz kode')

However, there is no need to update dojo, as javascript can easily accomplish this:

all = document.getElementsByTagName("tr");

for(var i = 0; i < all.length; i++) {//for (var i in all)
  all[i].onmouseover = function() {
  
    machineId = this.getAttribute('machineId');
    sameId = document.querySelectorAll('[machineId="'+machineId+'"]');
    for(var j = 0; j < sameId.length; j++) {//for (var j in sameId)
      sameId[j].style.backgroundColor = 'orange';
    }
    
  }
  
  all[i].onmouseleave = function() {
    for(var i = 0; i < all.length; i++) {//for (var i in all)
      all[i].style.backgroundColor = 'red';
    }
  }
}
table tr{
  background-color:red;
}
table tr:hover{
  background-color:green !important;
}
<table>
    <tr class="odd" machineId="1" parameterId="1"><td>machine 1</td></tr>
    <tr class="even" machineId="1" parameterId="2"><td>machine 1</td></tr>
    <tr class="odd" machineId="1" parameterId="3"><td>machine 1</td></tr>
    <tr class="odd" machineId="2" parameterId="4"><td>machine 2</td></tr>
    <tr class="even" machineId="2" parameterId="5"><td>machine 2</td></tr>
    <tr class="odd" machineId="3" parameterId="10"><td>machine 3</td></tr>
    <tr class="noParameters" machineId="4"><td>machine 4</td></tr>
    <tr class="odd" machineId="6" parameterId="8"><td>machine 6</td></tr>
    <tr class="odd" machineId="7" parameterId="9"><td>machine 7</td></tr>
</table>

If your divs have a "default" background color, simply remove the background instead of setting it to red.

Hope this information proves useful.

Answer №2

After some experimentation, I successfully implemented a solution where the code wraps each group of <tr>s with a <tbody> element based on their machineId. Additionally, I applied the hover effect related to the machineId to the table 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

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px? Take a look at this JSfiddle for reference. HTML: <table> <tr> <td class="fixed-width">Fixed width col ...

htmlcsshtml-table

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

cssangularbindingstyles

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

Fetching JSON array from servlet with AJAX

I have two JSON arrays in my servlet. I am trying to retrieve the values from the JSON arrays and display them on a JSP page using AJAX. Here is the code snippet: JSONArray htags = new JSONArray(); htags.add("#abc"); htags.add("#xyz"); ...

javajqueryajaxjsonjsp

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link: Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is no ...

cssfontssafarigoogle-webfonts

Troubleshooting HTML Label Problems

I am facing an issue with my custom labels. .label-ras{ padding:3px 10px; line-height:15px; color:#fff; font-weight:400; border-radius:5px; font-size:75%; } .label-primar{background-color:#5c4ac7} <span style="background- ...

htmlcss

Issue with implementing custom fonts using @font-face

I've added custom @font-face styling to my CSS using a downloaded font, but it doesn't seem to be working. Below is my CSS code: @font-face { font-family: "Quicksand"; src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype"); } The f ...

htmlcssfont-face

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

The picture won't stay within the confines of the container

As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...

htmlcss

Strategies for addressing input range slider cross browser compatibility issues

I have encountered an issue with the slider track while using a customized range slider with CSS. For Mozilla, I utilized the selector for progress (-moz-range-progress) and for IE I used -ms-filler-lower and -ms-filler-upper. Although it works well for b ...

javascriptjqueryangularjscss

Use Vue.js class bindings to create blank spaces in between CSS classes

I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component. When I specify this in my template: <aside v-bind:class="{'--opened': sidebarVisible}" ...

htmlcssvue.jsweb-frontend

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

Ways to establish a minimum height for material cards using Material UI

I am facing an issue with a card that contains a nested table. The card expands and shrinks based on the size of the table inside it. I want to prevent the card from shrinking when the table has no data or just one entry. Instead, I need the card to mainta ...

javascriptcssreactjsmaterial-ui

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

pythonhtmlcssseleniumxpath

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

htmlcssxpath

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

I'm facing an issue with a DIV that is 600px wide and contains a table. Due to long email addresses, the wrapping isn't working properly even after using word-wrap: break-word. I've experimented with changing the width, adding !important, a ...

csshtml-tableoverflow