Question 252989 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Change background color of a row of Divs on hover

I am trying to change the background color of a row of Divs on hover but I cannot figure out how to do that.

// row 1
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

// row 2
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
// row 3
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

How do I hover on a row and highlight that rows Divs by changing their background color?
(My Divs are inside a css grid).

Thank you for any help.

Tags:

3

Answers


  1. 0

    it’s better to put each row into another Div and add Class to them and then:

    .e:hover{
   background-color:#FF0000;
}
    Login or Signup to reply.
  2. 0

    You can set the background color upon hover for all divs like this in your css file:

    .div {
  background-color: lightgray;
}

.div:hover {
  background-color: yellow;
}

    Now the div will become yellow upon hovering.

    If you want to make it specific for each row. You can wrap a row in a another div and give it an id. Then reference the ID in your css for the specific styling.

    Your HTML:

    // row 1
<div id="first-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

    Your CSS:

    #first-row {
  background-color: lightgray;
}
#first-row:hover {
  background-color: yellow;
}
    Login or Signup to reply.
  3. 0

    You should use a hover pseudo style for the divs like

    div:hover { background-color: #0000ff; }

    If you need to differentiate the rows, please extend your class style with a row class or something specific

    .row-1 div:hover { background-color: #0000ff; }
.row-2 div:hover { background-color: #00ff00; }
.row-3 div:hover {  background-color: #ff0000; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search