在单元素悬停时更改多个元素的悬停效果

Question

我想知道是否可以将多个元素的悬停效果激活到悬停在单个元素上时。

用例：我想要一个无色，灰色的部分。当用户在包含所有灰色元素的部分上滚动时，所有元素都会平滑过渡到悬停颜色...

效果示例：

Answer 1

当您在父元素上设置:hover选择器时，可以使用CSS来做到这一点，例如：

.parent > div {
  background: grey;
  padding: 10px;
  margin: 10px 0;
  transition: background 0.4s;
}

.parent:hover > div {
  background: blue;
}

<div class="parent">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>

如果出于某种原因需要在子元素上设置:hover，则可以使用JavaScript。

Answer 2

假设您的两个部分都具有类section1和section2，则可以使用以下内容：

    $(".section1").on({
        mouseenter: function () {
            //choose what to do on hover
            this.style.setProperty('background-color','//section1 color');
            $('.section2', this)[0].style.setProperty('background-color','//section2 color');

        },
        mouseleave: function () {
             //choose what to do on mouse leave
        }
    });

Answer 3

您正在寻找类似的东西

children = $('.col-sm-2')
$('.col-sm-2').mouseover(function() {children.addClass('bg-danger text-white transit')})
$('.col-sm-2').mouseleave(function() {
  children.addClass('exit')
  children.removeClass('bg-danger text-white');
  
 })

.transit {
  transition: background-color 1s ease;
}
.exit {
  transition: background-color 1s ease-out;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border p-4 ">
  <div class="col-sm-12 m-1">
    Mouser over a child element below
  </div>
  
  <div class="col-sm-2 bg-secondary rounded m-1">
    child 1
  </div>
  <div class="col-sm-2  bg-secondary rounded m-1">
    child 2
  </div>
  <div class="col-sm-2  bg-secondary rounded m-1">
    child 3
  </div>
  <div class="col-sm-2  bg-secondary rounded m-1">
    child 4
  </div>
  <div class="col-sm-2  bg-secondary rounded m-1">
    child 5
  </div>
</div>