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

Question

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

Answer 1

<div>
            <div id="div1" style="height: 100px;display: inline-block;width: 100px; border: 1px solid #000;"></div>
            <div id="div2" style="height: 100px;display: inline-block;width: 100px; border: 1px solid #000;"></div>
        </div>



    var oDov1 = document.getElementById('div1');
            var oDov2 = document.getElementById('div2');
            oDov1.onmouseover = function(){
                this.style.background = "red";
                oDov2.style.background = "";
            }
            oDov2.onmouseover = function(){
                this.style.background = "green";
                oDov1.style.background = "";
            }

Answer 2

给这两个div都添加一个onmouseover鼠标移入事件来控制这两个div即可，移入div1时给div1添加绿色的类名，div2移除红色的类名，移入div2时给div1移除绿色的类名，div2添加红色的类名

Answer 3

1，写两个盒子，控制isShow
2，一个盒子，控制background-color

Answer 4

<div class="container">
    <div class="item div1">DIV1</div>
    <div class="item div2">DIV2</div>    
</div>

.green{
    background-color: green;
}
.red{
    background-color: red;
}

$(".item").on("mouseover",function(){
    //如果是div1，添加绿色类,并且把div2的红色类移除
    if($(this).hasClass("div1")){
        $(this).addClass("green").siblings().removeClass("red");
    }else{
        $(this).addClass("red").siblings().removeClass("green");    
    }
})