怎样实现鼠标经过不同div变换不同的背景图片

Question

也就是说鼠标经过DIV1区域时，变成绿色背景，移出DIV1时背景不变，只有经过DIV2时才变成红色背景。反过来，只有鼠标经过div之后变成绿色图片。求具体实现DEMO

Answer 1

<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="div1" style="height: 100px;display: inline-block;width: 100px; border: 1px solid #000;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="div2" style="height: 100px;display: inline-block;width: 100px; border: 1px solid #000;"></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; var oDov1 = document.getElementById('div1');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oDov2 = document.getElementById('div2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oDov1.onmouseover = function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.style.background = "red";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oDov2.style.background = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oDov2.onmouseover = function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.style.background = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oDov1.style.background = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }