CSS alone has the power to make multiple elements react to a hover action on a div

Question

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: 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>

However, I'm curious if it's possible to achieve a similar effect where hovering over one div element ("a") triggers a size change in two other div elements ("b" and "c").

Your insights are greatly appreciated.

html css css-selectors hover

Answer 1

Answer №1

Achieving this effect is possible using the sibling selector. The adjacent sibling selector you applied in your code snippet will style only the element immediately following it in the DOM, whereas the sibling selector will style all sibling elements after the specified reference element .a.

Here's an example of HTML structure:

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

Corresponding CSS styling:

.a:hover ~ div{
 //apply styles to .b and .c here
}

It is worth noting that the sibling selector only affects siblings that come after the reference element...it does not target any siblings positioned before it. At present, CSS lacks the capability to traverse upwards in the DOM tree.

Answer 2

Achieving this effect is possible using the sibling selector. The adjacent sibling selector you applied in your code snippet will style only the element immediately following it in the DOM, whereas the sibling selector will style all sibling elements after the specified reference element .a.

Here's an example of HTML structure:

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

Corresponding CSS styling:

.a:hover ~ div{
 //apply styles to .b and .c here
}

It is worth noting that the sibling selector only affects siblings that come after the reference element...it does not target any siblings positioned before it. At present, CSS lacks the capability to traverse upwards in the DOM tree.

Answer 3

Answer №2

The relationship between these elements determines the CSS selectors to use.

1. If they are siblings and adjacent, you can use + for the c div as well. Check out the example 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 but not adjacent, use ~ for both b and c after a.

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. When b and c come after a, with c immediately following b, combine ~ with +. See the code snippet 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>

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

If they are children, you can use a:hover b,a:hover c or > (direct child) along with the sibling selectors mentioned above.

There are various possibilities depending on the structure of your HTML. Keep in mind that this can only be achieved in CSS if b and c follow a in the DOM tree.

Answer 4

The relationship between these elements determines the CSS selectors to use.

1. If they are siblings and adjacent, you can use + for the c div as well. Check out the example 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 but not adjacent, use ~ for both b and c after a.

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. When b and c come after a, with c immediately following b, combine ~ with +. See the code snippet 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>

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

If they are children, you can use a:hover b,a:hover c or > (direct child) along with the sibling selectors mentioned above.

There are various possibilities depending on the structure of your HTML. Keep in mind that this can only be achieved in CSS if b and c follow a in the DOM tree.

Answer 5

Answer №3

Indeed, utilizing sibling selectors (as long as 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>

Answer 6

Indeed, utilizing sibling selectors (as long as 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>

CSS alone has the power to make multiple elements react to a hover action on a div

Answer №1

Here's an example of HTML structure:

Corresponding CSS styling:

Answer №2

Answer №3

Similar questions

Is the dropping of the middle section in the inline list imminent?

Enhancing the appearance of individual cells within an HTML table by applying custom classes

Include a class for CSS styling in EJS using Node.js

Utilizing window.matchMedia in Javascript to retain user selections during page transitions

Utilize JavaScript to trigger a div pop-up directly beneath the input field

No code is appearing on the page, just a blank space

Generate a custom image using a pre-existing background image and text using JavaScript, then save it as a JPEG file in

Curved base of the main banner image

Looking to alter the CSS of an ID element when hovering over a link on your website?

Customizing Background Image Opacity in MuiCssBaseline

Sticky CSS - A guide to making aside elements fill the entire available height

What is the secret to aligning two elements flawlessly?

There appears to be an error in the @media CSS code that needs to be corrected

Guidance on implementing fallback font formats using FontFace API

The Bootstrap menu does not seem to be affecting the positioning of the body text

The checkbox filter in Angular 6 has the ability to replace the previously selected

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

Add the cordova plugin multi-image-picker with the following command

What steps should I take to make my Twitter widget adaptable to varying screen heights?

Strategies for transferring user input data to a function in view.py