JQuery активация все класс зависания

Question

Мне бы хотелось, чтобы мои разные классы, имеющие класс: hover, активировали все одновременно, один из них - hover.

Например, у меня есть много div, которые меняют bg-image при наведении курсораи для адаптивного дизайна, вероятно, будет трудно изменить стиль в коде jquery.

На данный момент у меня есть нечто подобное с гораздо большим количеством классов, но в основном это так:

$(document).ready(function() {
  $('.box0,.box1').hover(
    function() {
      $('.box0,.box1').toggleClass("hover");
    })
});

html {}

body {
  background: darkgray;
}

.box0 {
  position: absolute;
  top: 50%;
  left: 10%;
  height: 50px;
  width: 50px;
  background-color: rebeccapurple;
  background-image: url(res/arrow-black.png);
}

.box0:hover {
  background-image: url(res/arrow-green.png);
  background-color: royalblue;
}

.box1 {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 50px;
  width: 50px;
  background-color: green;
}

.box1:hover {
  background-color: greenyellow;
}

<div class="box0"></div>
<div class="box1"></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Answer 1

Если я понимаю, что вы пытаетесь сделать, вы можете создать событие при наведении курсора и затем переключаться между элементами для переключения класса hover.

$('div[class^=box]').hover(function() {
  $('div[class^=box]').each(function(i) {
    $(this).toggleClass("hover");
  });
});

body {
  background: darkgray;
}

.box0 {
  position: absolute;
  top: 50%;
  left: 10%;
  height: 50px;
  width: 50px;
  background-color: rebeccapurple;
  background-image: url(res/arrow-black.png);
}

.box0.hover {
  background-image: url(res/arrow-green.png);
  background-color: royalblue;
}

.box1 {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 50px;
  width: 50px;
  background-color: green;
}

.box1.hover {
  background-color: greenyellow;
}

.box2 {
  position: absolute;
  top: 50%;
  left: 30%;
  height: 50px;
  width: 50px;
  background-color: red;
}

.box2.hover {
  background-color: orange;
}

.box3 {
  position: absolute;
  top: 50%;
  left: 40%;
  height: 50px;
  width: 50px;
  background-color: blue;
}

.box3.hover {
  background-color: black;
}

.box4 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  background-color: purple;
}

.box4.hover {
  background-color: brown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

Answer 2

Я не уверен, что вы хотите.но, насколько я понимаю, вы хотите активно навести на все элементы одного класса, если наведите курсор на один из них ...

$(document).ready(function() {
  $('.element').mouseover(
    function() {
      $('.element').addClass("active");
    });
   
$('.element').mouseout(
    function() {
      $('.element').removeClass("active");
    });
});

html {}

body {
  background: darkgray;
}

.box0 {
  position: absolute;
  top: 50%;
  left: 10%;
  height: 50px;
  width: 50px;
  background-color: rebeccapurple;
  background-image: url(res/arrow-black.png);
}

.box0.active {
  background-image: url(res/arrow-green.png);
  background-color: royalblue;
}

.box1 {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 50px;
  width: 50px;
  background-color: green;
}

.box1.active {
  background-color: greenyellow;
}

<div class="element box0"></div>
<div class="element box1"></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>