当另一个元素处于活动状态时更改元素的样式

Question

当第2类为焦点或悬停时，我可以更改第1类的样式吗？ CSS有什么办法吗？

就像这里。

<button class='class 1'></button>
<button class='class 2'></button>

Answer 1

您可以使用mouseover和mouseout

$('.class').on('mouseover', function(e) {
  $('.class').not($(this)).addClass('hover')

})

$('.class').on('mouseout', function(e) {
  $('.hover').removeClass('hover')

})

.hover {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class 1'>Test</button>
<button class='class 2'>Test 1</button>

Answer 2

尝试一下。将鼠标悬停在按钮2上时，它将更改按钮1的背景色。

$(document).ready(function() {
  $('.class2').hover(function() {
    $('.class1').css('background-color', 'blue')},
    function(){
    $('.class1').css('background-color', '')
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button</button>
<button class='class2'>Button</button>

Answer 3

您可以尝试使用jQuery的.hover()。

请注意：类名中不允许有空格。

$('.class2').hover(
  function() {
    $('.class1').css({color:'red'});
  }, function() {
    $('.class1').css({color:'blue'});
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button 1</button>
<button class='class2'>Button 2</button>

Answer 4

仅使用CSS可以做到这一点，但可能有点挑剔。

您可以使用pseudo-classes focus和hover并选择类别为.class1的紧靠元素。由于+将在您可以使用flex和order移动按钮之后立即将其定位为元素，因此它们以正确的顺序出现：

.class2:hover+.class1 {
  background: lime;
  color: red;
}

.class2:focus+.class1 {
  background: red;
  color: white;
}

.wrapper {
  display: flex;
}

.class1 {
  order: 1;
}

.class2 {
  order: 2;
}

<div class="wrapper">
  <button class='class2'>Button2</button>
  <button class='class1'>Button1</button>
</div>

Answer 5

尝试一下

html

    <button class='class1'>button1</button>
    <button class='class2'>button2</button>

css

    .class1:hover + .class2,
    .class1:active + .class2,
    .class1:focus + .class2{
          background: blue;
     }

    .class2:hover + .class1,
    .class2:active + .class1,
    .class2:focus + .class1{
          background: green;
     }

谢谢。