CODEWITHSUNDEEP
htmlcsscss-selectorshover
henriquezc
henriquezc

Reputation: 21

Pure CSS, div hover can affect more than one element

I can change the size of a div element when is hover another div element, like this example. https://jsfiddle.net/9510a6kj/

 .left, .right{
        float:left;
    }

    .left{
        background: red;
        width: 200px;
        height: 300px;
        transition: width 1s ;
    }

    .right{
        background: blue;
        width: 300px;
        height: 300px;
        transition: width 1s;
    }

    .left:hover{
        width: 300px;
    }

    .left:hover + .right{
        width: 100px;
    }
    </style>

But it's possible to change the size of two different div elements when is hover the first element.

For example on mouse hover div "a", change size of div "b" and div "c".

Thank you.

Upvotes: 1

Views: 945

Answers (3)

Mihai T
Mihai T

Reputation: 17687

It all depends on what relationship is between those elements.

1. If they are siblings and one after the other use + also for the c div . See below

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover + .b {
  background: blue;
}

.a:hover + .b + .c {
  background: red;
}
<div class="a">
  a
</div>
<div class="b">
  b
</div>
<div class="c">
  c
</div>

2. If they are siblings and both b and c are after a , but not one after the other, use ~

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover ~ .b {
  background: blue;
}

.a:hover ~ .c {
  background: red;
}
<div class="a">
  a
</div>
<div>

</div>
<div class="b">
  b
</div>
<div>

</div>
<div class="c">
  c
</div>

3. if b and c are after a but not right after, but c is right after b you can use ~ together with +

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover ~ .b {
  background: blue;
}

.a:hover ~ .b + .c {
  background: red;
}
<div class="a">
  a
</div>
<div>

</div>
<div class="b">
  b
</div>
<div class="c">
  c
</div>

  1. if they are children you can use a:hover b,a:hover c or > ( direct child) and then you can add the above sibling selectors.

As i said, there are many possibilities. It all depends on the structure. BUT you can only do this with CSS if b and c come after a in the dom tree.

Upvotes: 0

Tejasvi Karne
Tejasvi Karne

Reputation: 648

Yes, you can do it with the sibling selector. While the adjacent sibling selector you used in your fiddle will style the element immediately following it in the DOM, the sibling selector will style all the sibling elements as long as they follow .a.

HTML

<div class="parent">
   <div class="a"></div>
   <div class="b"></div>
   <div class="c"></div>
</div>

CSS

.a:hover ~ div{
 //style .b and .c here
}

Note well though, the sibling selector only works for siblings that follow...it wont work for siblings before your reference element. CSS cannot go back up the DOM tree as yet.

Upvotes: 2

Johannes
Johannes

Reputation: 67748

Yes, with sibling selectors (IF they are siblings)

.a {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}

.b {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: blue;
  transition: all 1s;    }

.c {
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: yellow;
  transition: all 1s;
}

.a:hover~.b {
  height: 160px;
}

.a:hover~.c {
  height: 120px;
}
<div class="a">hover me</div>
<div class="b">b b b b b</div>
<div class="c">c c c c c</div>

Upvotes: 0

Related Questions