鼠标移动到某一处时，此处背景变红色，在线等

Question

html页面中<div id="1">
第2块内容
</div><div id="2">
第2块内容
</div>现需：当鼠标移动到第１个div时，第１个div背景色变红，
　　　当鼠标移动到第２个div时，第２个div背景色变红，
这如何实现呀，thanks

Answer 1

<div id="1" onmouseover="this.setAttribute('style','background-color: red')" onmouseout="this.removeAttribute('style')">
第2块内容
</div><div id="2" onmouseover="this.setAttribute('style','background-color: red')" onmouseout="this.removeAttribute('style')">
第2块内容
</div>

Answer 2

<div id="1" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''">
第1块内容
</div>
<div id="2" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''">
第2块内容
</div>

Answer 3

<script>
function clrChng(obj){
  obj.style.backgroundColor="red";
}
function clrOrig(obj){
  obj.style.backgroundColor="";
}
</script>
<div id="1" onmouseover="clrChng(this)" onmouseout="clrOrig(this)">
第1块内容
</div><div id="2"  onmouseover="clrChng(this)" onmouseout="clrOrig(this)">
第2块内容
</div>

Answer 4

.css1{
background:#FF0000}
$(document).ready(function () {
            $("#1").toggle(function () {
                $(this).addClass("css1");
            }, function () {
                $(this).removeClass("css1");
            });
            $("#2").toggle(function () {
                $(this).addClass("css1");
            }, function () {
                $(this).removeClass("css1");
            });
        })
<div id="1">
        第1块内容
    </div>
    <div id="2">
        第2块内容
    </div>