Alter the background color of two rows when the mouse is hovered over them

Is there a way to highlight two rows simultaneously in a table when hovering over them?

I have achieved highlighting one row at a time using the code below:

<tr onmouseover="this.style.backgroundColor='#aaaaaa';" onmouseout="this.style.backgroundColor='#bbbbbb';">

The challenge is that my data is displayed in pairs, such as Rows 1 and 2, 3 and 4. I am looking for a solution that allows me to highlight both rows in each pair together when mousing over either of them. For example, when hovering over Row 1 or Row 2, both should be highlighted.

<tr><td>Row1</td></tr>

<tr><td>Row2</td></tr>

<tr><td>Row3</td></tr>

<tr><td>Row4</td></tr>

javascripthtmlcss

Answer №1

Grouping pairs of rows together can be achieved by using the <tbody> tags, and applying a CSS :hover style to set the color.

<html>
    <style>
        .foo:hover { background-color: #aaaaaa; }
    </style>
    <body>
        <table>
            <tbody class="foo">
                <tr><td>Row1</td></tr>
                <tr><td>Row2</td></tr>
            </tbody>
            <tbody class="foo">
                <tr><td>Row3</td></tr>
                <tr><td>Row4</td></tr>
            </tbody>
        </table>
    </body>
</html>

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

What is the best way to verify an array of objects within an asynchronous function?

I am struggling with validating an array of objects being sent to the server. It seems that my current code is not working properly when the array is empty or if the objects within it are invalid. I'm confused about why it's not functioning as ex ...

javascriptarraysexpressobject

Including a contact number on a smartphone's non-native app for iPhones and Androids

Looking to automate the process of adding a number to my contact list on both iPhone and Android devices. I am coding in Java, as well as using javascript and HTML5. Most solutions I have come across are for native apps. Does anyone know of a solution that ...

javajavascriptandroidiphonehtml

SyntaxError: An unidentified item was encountered at the <head> location

I have encountered an issue while loading a PHP file that utilizes ajax. Initially, the page loads without any errors. However, upon triggering the onclick event on a button, I receive the error message "Uncaught SyntaxError: Unexpected identifier" pointin ...

javascriptphphtmlajax

The PHP code doesn't display the slider, whereas it appears on the HTML page

Creating a shortcode for a slider that displays WordPress featured posts and allows users to view details of each post through a hidden div. The slider is inspired by the one on w3schools, where you can find the code and test it online at this link: https: ...

phpjquerycsswordpress

Issues with creating a Dynamic Dependent Select Box using jQuery and PHP

Currently, I am working on a project for my university. The task at hand involves creating four select boxes: Country, State, City, and Course, where the options of three are dependent on the choice made in another. The user's selection will impact th ...

javascriptphpjqueryajax

PHP is not receiving AJAX POST requests through the $_POST method

I am currently working on a Firefox OS app and I am facing the challenge of using the OpenBadges API instead of PHP, which would have simplified the process. The issue I am encountering revolves around my data not being received by my PHP script after sen ...

javascriptphpjqueryajaxpost

Encountering a react error following the installation of FontAwesome via npm

I successfully installed fontawesome by visiting their official website and following the steps below: 1. npm i --save @fortawesome/fontawesome-svg-core 2. npm install --save @fortawesome/free-solid-svg-icons 3. npm install --save @fortawesome/react-fon ...

javascriptnode.jsreactjsnpm

Controller Function Utilizing Private Variable in AngularJS

After stumbling upon an Angularjs example online, I found myself perplexed. The code snippet in question is as follows: angular.module("testApp",[]).controller("testCtrl", function($scope){ var data = "Hello"; $scope.getData = function(){ ...

javascriptangularjs

Use Yii2 to pass an ID when a button is clicked in order to render a partial using

On the index page, I display all the rows and some fields from my model. When a button is clicked, I want a modal to appear with all the data from the corresponding row. When the button is clicked, I need an ajax call to render a partial view. This will i ...

javascriptjqueryajaxyii2

What's the most efficient method of exporting modules along with their submodules in (Vue, React)?

Looking for the most efficient method to export a module that contains submodules with the help of an index.js? I have been following a specific naming and saving convention for my web components in projects involving Vue or React. However, I am interested ...

javascriptreactjsvue.jsweb-component

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

javascriptjqueryajax

What sets apart Object.assign {} from Object.assign []?

While reviewing code done by a previous developer who is no longer with us, I observed that they sometimes used Object.assign({}, xyz) and other times they used Object.assign([], abc); Could there be a distinction between the two methods? ...

javascripttypescript

Implement checkbox functionality for data binding in Vue framework

I'm having trouble figuring out how to display the selected values in Vue. I've got a form that triggers a query based on the user's selections: <form id="Register"> <br>Firstname<input type="checkbox" value="firstNam ...

javascripthtmlvue.jsvuejs2

accept various query parameters in a GET request in a REST API written in Node.js

Is there a way to dynamically receive multiple parameters in a GET request without knowing which ones will come and which ones won't, in order to filter using the find() method? This pertains to NODE JavaScript with Mongoose app.get('/venta&apos ...

javascriptnode.jsmongodbmongoosebackend

Enforcing Sequential Execution in Node.js

I have finally grasped the concept of callbacks in node.js, but now I am striving to ensure that my code executes in the correct sequence. Here are the steps I aim to follow: Retrieve the URL content using cheerio. Iterate through each <td> elemen ...

javascriptsqlnode.jsasynchronous

Looping through objects within objects using .map in React can be done by iterating over

This is the information I have export const courses = [ { id: 0, title: "first year", subjects: [ { id: 0, class: "french" }, { id: 1, class: "history" }, { id: 2, class: "geometry" } ...

javascriptreactjsnext.js

Ways to verify if an array holds at least one object

I need to determine whether an array contains an object or not. I am interested in detecting the presence of an object within my array, without comparing its values. Examples: $arr = ['a','b','c'] // regular array $arr = [{ ...

javascriptarraysnode.js

Error #301 in React: Infinite loop causing repeated rendering

import React,{createContext,useState} from 'react'; export const UserContext = createContext(); export const UserProvider = props =>{ const [ user,setUser ] = useState({ logged: false, User_info: { } }) if( ...

javascriptreactjsreact-hooks

Utilizing NodeJS and Express to efficiently share sessions across various routes

I have a Node.js web application built with Express that has multiple routes. These routes need to be able to access and share the session data when interacting with users. The routes are separated into different js files from the main app file, app.js. I ...

javascriptnode.jsexpresssessionexpress-session

Position the tables next to each other

I have utilized Bootstrap 4 to create two tables, showcasing specifications and earning statistics separately. Both tables are enclosed within a col-xs-6 class with the intention of aligning one table to the left and the other to the right. However, at pr ...

htmltwitter-bootstrapbootstrap-4