Изменение изображения в разных div при наведении

У меня есть страница, содержащая 6 элементов, по 3 элемента в каждом ряду. Моя цель - изменить изображение в div с id=b во втором ряду при наведении на div с id=a в первом ряду. Ниже приведен мой HTML.

homepage.html

{% block body %}

<div class="container-fluid">

<!--ROW 1-->
    <div class="row w-100">
        <div class="card col-4 mobile-fly-me-section sidebar-color">
              <div class="text-uppercase home-fly">Lorem Ipsum</div>
          </div>
          <div class="card col-4 hal-section justify-content-between p-3" id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">
              <h5 class="card-title home text-uppercase">header</h5>
              <a href="{% url 'main' %}" class="border-0 text-uppercase home stretched-link text-decoration-none">GO <img class="arrow" src="{% static 'assets/main/arrow.svg' %}"></a>
          </div>
          <div class="col-4 border d-flex flex-column min-vh-25 justify-content-end align-items-bottom p-3 home">Lorem ipsum</div>
    </div>
<!--END ROW 1-->

<!--ROW 2-->
<div class="row w-100">
    <div class="card col-4 mobile-fly-me-section text-uppercase home" id="b">
        <img src="{% static 'assets/graphics/graphic 01.svg' %}" width="75%"> <!-- before hover-->
        <img src="{% static 'assets/graphics/graphic 02.svg' %}" width="75%"> <!-- after hover-->
      </div>
        <div class="col-4 border d-flex flex-column min-vh-25 justify-content-end align-items-bottom p-3 home">Lorem ipsum</div>
        <div class="col-4 border d-flex flex-column min-vh-25 justify-content-between align-items-top p-3 text-uppercase home"><b>Lorem ipsum</b>
        <div> <img class="arrow" src="{% static 'assets/main/arrow.svg' %}">
        </div>
</div>
<!--END ROW 2-->

</div>

{% endblock body %}

{% block js %}
<script async src="//jsfiddle.net/YShs2/embed/"></script>
<script>
  function chbg(color) {
      document.getElementById('b').style.backgroundColor = color;
  }
</script>
{% endblock js %}

Я нашел решение , которое меняет цвет фона, но я не уверен, как переключить изображения (с graphic 01.svg на graphic 02.svg)

Если #b является следующим за #a, вы можете решить это с помощью CSS, используя селектор + (следующий непосредственно) или ~ (следующий):

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

#a:hover + #b {
   background-color: red;
}
#a:hover ~ #c {
   background-color: blue;
}

Если же эти два элемента не являются родными, вам может понадобиться JS. В случае с jQuery, вы можете:

$('#a').mouseenter(function(){
    // update src value
    $('#b').attr('src','other-image.svg');
    // or toggle class to change styles
    $('#b').addClass('a-is-hovered');
}).mouseleave(function(){
    $('#b').attr('src','first-image.svg');
    $('#b').removeClass('a-is-hovered');
});

Вы можете сделать это аналогично тому, как изменяется фон. Свойство, которое вам нужно обновить, это 'content', и вы устанавливаете его в "url(http://someimage.com)"

Таким образом, у вас будет функция типа

  function changeURL(imgURL) {
    document.getElementById('b').style.content = `url(${imgURL})`;
  }

Затем на div #a вы можете иметь

onmouseover="changeURL(url1)" onmouseout="changeURL(url2)"
Вернуться на верх