Css: Trigger a sibling div by hover a button inside div that holds button

Question

I want to change the color of div(#panel) when I hover the button(#button) that inside in div(#left). Is it possible?

    #left #button:hover~#panel {
            
            background-color: blue;

        }

        #panel {

            position: absolute;
            float: right;
            left: 37.5%;
            width: 50%;
            height: 5px;
            background-color: rgb(180, 30, 30);

        }

    <div id="left">
        <button id="button">Topics</button>

    </div>

    <div id="panel"></div>

I think you can't do that without a script. As I recall you can't apply a specific style on an element when you trigger an event on another one. — asma, Apr 18 '20 at 21:40

score 0 · Answer 1 · answered Apr 18 '20 at 21:47

0

There is currently no way to select the parent of an element in CSS.

For you to :hover on one element and apply css to other they both need to be on the same level of identation.

Element you apply css to needs to go before element you :hover.

answered Apr 18 '20 at 21:47

ColdHands

947
8
28

Ehsan · Answer 2 · 2020-04-18T22:21:35.650

If you could, go back and get parent of #button(I mean to achieve to #left),you can use + selector(#left + #panel) and change color of panel,but unfortunately,there is no backward in css, so you can't use pure css and you have to get help from javascript or jquery like this:

$("document").ready(function() {

    $("#button").hover(function() {

        $("#panel").css("color", "red");

    },

    function() {

        $("#panel").css("color", "initial");

    })
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="left">

    <button id="button">Topics</button>

</div>

<div id="panel">Panel</div>

joshmoto · Answer 3 · 2020-04-18T22:06:01.510

You can't quite do it with pure CSS in your example because #panel is not a true sibling to #button.

Heres a basic script using jQuery...

$("#button").hover(
  function () {
    $("#panel").addClass("hover");
  },
  function () {
    $("#panel").removeClass("hover");
  }
);

#button:hover {
  background-color: blue;
}

#panel {
  position: absolute;
  float: right;
  left: 37.5%;
  width: 50%;
  height: 5px;
  background-color: rgb(180, 30, 30);
}

#panel.hover {
  background-color: blue;
}

<div id="left">
  <button id="button">Topics</button>
</div>

<div id="panel"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

With CSS, you can actually target sibling elements, only if #panel html appears immediately after #button html.

#button:hover {
    background-color: blue;
}

#button:hover + #panel {
    background-color: blue;
}

#panel {
    position: absolute;
    float: right;
    left: 37.5%;
    width: 50%;
    height: 5px;
    background-color: rgb(180, 30, 30);
}

<button id="button">Topics</button>

<div id="panel"></div>

score 0 · Answer 4 · answered Apr 18 '20 at 21:59

You can't do it if it's not sibling or after or inside the container element, as far as i know.

You can do it with a simple inline javascript instead:

#left #button:hover~#panel {

        background-color: blue;

    }

    #panel {

        position: absolute;
        float: right;
        left: 37.5%;
        width: 50%;
        height: 5px;
        background-color: rgb(180, 30, 30);

    }

<div id="left">
    <button id="button" onmouseover="document.getElementById('panel').style.background='blue';"
onmouseleave="document.getElementById('panel').style.background='rgb(180, 30, 30)';">Topics</button>

</div>

<div id="panel"></div>

Css: Trigger a sibling div by hover a button inside div that holds button

4 Answers4