javascript - 当另一个元素处于事件状态时更改元素的样式

Question

当 class 2 处于焦点或悬停状态时，我可以更改 class 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>