Наведите курсор на 1 div, чтобы изменить содержимое другого div

Question

(я пробовал подсказки из нескольких постов здесь, но все еще не повезло)

По сути, я хочу навести курсор мыши на div "b" и изменить содержимое в div "a".В фактическом коде у diva и dib разные родители, поэтому нельзя делать только css.

упрощенный html:

$("#divb").hover(function() {
  $("#div a").css('content', 'url(img2.png)');
}, function() {
  $("#diva").css('content', 'url(img1.png)');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="diva">A</div>

<div id="divb">B</div>

Любая помощь будет принята с благодарностью :) Я часами пробовал разные методы

Answer 1

У тебя все отлично.Вам просто нужно удалить пробел с div a до diva, чтобы он заработал.

Answer 2

$("#divb") получит элемент с id="divb", вы должны использовать # до id, а не имя тега, т.е. div. Ниже приведен пример с примерами изображений

$('div#a').hover(function(){
  $('div#b').css('content','url(https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg)');
},function(){
  $('div#b').css('content','url(https://i.pinimg.com/736x/c2/9d/7d/c29d7d7388523342de339fdc2611e80f--flamingo-art-flamingo-beach.jpg?b=t)');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">A</div>
<div id="b">B</div>

Answer 3

В вашем HTML-файле:

<div id="diva"></div>
<div id="divb"></div>

В вашем файле js:

$('#divb').on('hover', () => {
    $("#div a").css('content','url(img2.png)');
    $("#diva").css('content','url(img1.png)');
});