On Hover, apply CSS rule to more than one class

Question

I have 2 divs, i want to hover the first one to affect both of them, i found out on the forum how to affect the second by hovering the first one, but not both of them.

There is my code:

        .red{
                height: 150px;
                width: 150px;
                background-color: red;
                float:left;
                margin-right: 20px;
        }

        .blue{
                height: 150px;
                width: 150px;
                background-color: blue;
                float:left;
        }

        .red:hover ~ .blue{
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

Thanks for helping me.

I’m not sure, but it seems as if you want to hover `.blue` and affect `.red`, which isn’t possible (we can’t target a previous element with CSS): https://stackoverflow.com/a/1817801/82548 — David Thomas, Aug 11 '18 at 18:13
I want to hover one of them ( red or blue ), to affect both of them ( red and blue ) — alioua walid, Aug 11 '18 at 18:19

score 1 · Accepted Answer · answered Aug 11 '18 at 18:08

you can add red:hover selector to last style declaration ie you do to hovered red div what you are doing to blue div

.red{
                height: 150px;
                width: 150px;
                background-color: red;
                float:left;
                margin-right: 20px;
        }

        .blue{
                height: 150px;
                width: 150px;
                background-color: blue;
                float:left;
        }

        /* added one more selector here */
        .red:hover,
        .red:hover ~ .blue{
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

It works when i hover the red one, but not the blue one. – alioua walid Aug 11 '18 at 18:27 — alioua walid, Aug 11 '18 at 18:27
you should use javascript in that case – ashish singh Aug 11 '18 at 18:37 — ashish singh, Aug 11 '18 at 18:37

score 0 · Answer 2 · answered Aug 11 '18 at 18:10

0

to apply a rule to more than one selector use a comma between selectors

.red:hover ~ .blue, .red:hover {
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

answered Aug 11 '18 at 18:10

Clint

973
7
18

score 0 · Answer 3 · answered Aug 11 '18 at 18:15

0

You can always give the same class to the divs that you want to affect.

<html>
<head>
</head>
<body>
    <div class="red affect"></div>
    <div class="blue affect"></div>
</body>
</html>


.affect {
     width: 150px;
     height: 150px;

     float:left;
}

.red {
     background-color: red;
 }

 .blue {
     background-color: blue;
  }

  .affect:hover {
     transition: all .2s ease-in-out; 
     transform: scale( 1.2 ); 
    }

answered Aug 11 '18 at 18:15

Nathan Harold

55
1
6

It doesn't work, it affect only one at a time. – alioua walid Aug 11 '18 at 18:22

On Hover, apply CSS rule to more than one class

3 Answers3