Categories
css hover html

How to affect other elements when one element is hovered

647

What I want to do is when a certain div is hovered, it’d affect the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}

#container {
  width: 200px;
  height: 30px;
}

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}
<div id="container">
  <div id="cube">
  </div>
</div>

0

    1397

    If the cube is directly inside the container:

    #container:hover > #cube { background-color: yellow; }
    

    If cube is next to (after containers closing tag) the container:

    #container:hover + #cube { background-color: yellow; }
    

    If the cube is somewhere inside the container:

    #container:hover #cube { background-color: yellow; }
    

    If the cube is a sibling of the container:

    #container:hover ~ #cube { background-color: yellow; }
    

    17

    • 135

      Don’t forget the general sibling combinator ~ for ‘cube is somewhere after container in the DOM and shares a parent’

      – robertc

      Dec 21, 2010 at 18:50


    • 4

      That’s pretty cool. Is there some source where I can find more information about that ? Is it supported by all browser, is it CSS3 ? Would be great to have some more info about that. Thanks so much!

      – Anonymous

      Oct 19, 2011 at 10:35

    • 6

      +1 Great answer @Mike. What if #container is next to #cube, i.e. #container follows #cube?

      – PeterKA

      Oct 2, 2014 at 4:58

    • 7

      What to do if the hovered element is inside the container(that we want to be effected) ??? For example: #cube:hover #container{Some CSS Effects}

      Mar 3, 2015 at 15:19


    • 3

      Good answer !! What about if I want to change the parent when I hover the child. I think there is no selector for that.

      – Mikel

      Mar 8, 2017 at 11:49

    52

    In this particular example, you can use:

    #container:hover #cube {
        background-color: yellow;   
    }
    

    This example only works since cube is a child of container. For more complicated scenarios, you’d need to use different CSS, or use JavaScript.

    0

      48

      Using the sibling selector is the general solution for styling other elements when hovering over a given one, but it works only if the other elements follow the given one in the DOM. What can we do when the other elements should actually be before the hovered one? Say we want to implement a signal bar rating widget like the one below:

      Signal bar rating widget

      This can actually be done easily using the CSS flexbox model, by setting flex-direction to reverse, so that the elements are displayed in the opposite order from the one they’re in the DOM. The screenshot above is from such a widget, implemented with pure CSS.

      Flexbox is very well supported by 95% of modern browsers.

      .rating {
        display: flex;
        flex-direction: row-reverse;
        width: 9rem;
      }
      .rating div {
        flex: 1;
        align-self: flex-end;
        background-color: black;
        border: 0.1rem solid white;
      }
      .rating div:hover {
        background-color: lightblue;
      }
      .rating div[data-rating="1"] {
        height: 5rem;
      }
      .rating div[data-rating="2"] {
        height: 4rem;
      }
      .rating div[data-rating="3"] {
        height: 3rem;
      }
      .rating div[data-rating="4"] {
        height: 2rem;
      }
      .rating div[data-rating="5"] {
        height: 1rem;
      }
      .rating div:hover ~ div {
        background-color: lightblue;
      }
      <div class="rating">
        <div data-rating="1"></div>
        <div data-rating="2"></div>
        <div data-rating="3"></div>
        <div data-rating="4"></div>
        <div data-rating="5"></div>
      </div>

      6

      • Could this be edited so the highlight doesn’t disappear when moving the mouse from 1 bar to the other? The flashing is a little distracting.

        – Cerbrus

        Sep 9, 2015 at 6:23

      • 1

        Try this in your first snippet: on .rating div, remove the margin, and add border-right: 4px solid white;

        – Cerbrus

        Sep 9, 2015 at 9:47


      • 1

        Flex direction (not well supported for IE) OR 1) black by default 2) all blue on mouse over the container 3) black for next sibling on bar hover 🙂

        Oct 16, 2015 at 10:30


      • 1

        I made this fiddle which (at least for me) made it a little more aparent on what was going on here. jsfiddle.net/maxshuty/cj55y33p/3

        – maxshuty

        Jun 15, 2017 at 12:27

      • 1

        That’s a great idea! For instances where you only need one element to trigger a hover in the dom before it I think it would be better to use the flexbox order property so you don’t have to maintain the entire list in reverse order if only one element needs to trigger the hover.

        – TimE

        May 20, 2021 at 6:24