Я хочу, чтобы фоновое изображение красной секции изменилось, когда пользователь наводит курсор на синюю секцию.
У меня это работает нормально со следующим кодом
<script>
document.getElementById('scrolling-background-column-left').onmouseover = function()
{
document.getElementById('scrolling-background-section').style.background = "url('https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820,c_limit/Sunset-Beach-Oahu-cr-getty.jpg') no-repeat center";
};
document.getElementById('scrolling-background-column-left').onmouseout = function()
{
document.getElementById('scrolling-background-section').style.background = "";
};
</script>
Однако - это результат, когда я наведу курсор мыши на синюю секцию. Есть ли способ сделать так, чтобы изображение охватывало весь раздел / всю ширину страницы? Я попытался добавить cover
к коду, но это, похоже, не работает, если я пытаюсь изменить размер изображения с помощью кода, это ломает все.