CSS中的“和”选择器带有：hover

Question

I am trying to allow a object to move down if either the bar or sidebar are hovered. I am trying the following code:

#sidebarcategoryshow:hover#sidebar:hover #sidebarcategoryshow{
    margin-top: 200px;
    z-index: 5;
    -webkit-transition: 1s linear;
    -moz-transition: 1s linear;
    -o-transition: 1s linear;
    -ms-transition: 1s linear;
    transition: 1s linear;
}

And basically I want #sidebarcategoryshow to move down if either one is hovered. Yet this does not seem to work, any idea? :( Currently it just is not working like it should.

Answer 1

You would need to use two separate selectors:

#sidebarcategoryshow:hover #sidebarcategoryshow,
#sidebar:hover #sidebarcategoryshow {
    margin-top: 200px;
    z-index: 5;
    -webkit-transition: 1s linear;
    -moz-transition: 1s linear;
    -o-transition: 1s linear;
    -ms-transition: 1s linear;
    transition: 1s linear;
}

If you are using LESS , you could use the following:

#sidebarcategoryshow, #sidebar {
  &:hover #sidebarcategoryshow {
    /* ... */
  }
}