当鼠标悬停在另一个 div 上时更改 div 的背景图像

Question

function upDate(previewPic) {
  document.getElementById("image").innerHTML = previewPic.alt;
}

function unDo() {
  document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}

Answer 1

Here is one way, see the snippet below.

 var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); //this function will change div 2 to blue when you hover over div1 function hoverDiv() { div2.style.backgroundColor = "blue"; } //This function will change div back to grey when you hover away from div1 function hoverAway() { div2.style.backgroundColor = "grey"; }

 /* container is for example */ .container { display: flex; flex-direction: row; } #div1 { height: 200px; width: 200px; background-color: green; } #div2 { height: 200px; width: 200px; background-color: grey; }

 <div class="container"> <div onmouseover="hoverDiv();" onmouseout="hoverAway();" id="div1"><b>DIV1</b><br/><br/>Hover me to change color of Div 2</div> <div id="div2"><b>DIV2</b><br/><br/>I will change color when you Hover Div 1</div> </div>