当鼠标悬停在另一个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

这是一种方法，请参见下面的代码段。

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>