javascript攻克轮播图之悬停显示

关于悬停显示类似于选项卡

代码如下:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {

    }

    li {
        width: 149px;
        height: 100px;
        float: left;
        margin-right: 1px;
        list-style: none;
        background-color: green;
        line-height: 100px;
        text-align: center;
    }

    div {
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid red;
        overflow: hidden;
        border-top: none;
    }

    #box2 {
        width: 600px;
        height: 500px;
        background-color: #cccccc;
    }
    p{
        font-size: 30px;
        text-align: center;
    }
</style>

• 语文
• 数学
• 外语
• 计算机

请选择科目

var oAbj = myA("li");
for (var i = 0; i < oAbj.length; i++) {
    oAbj[i].onmouseover = function () {

        myA("p")[0].innerText = this.innerText;
        if (this.innerText == "语文") {
            my$("box2").style.backgroundColor = "yellow";
            this.style.backgroundColor = "yellow";
        }else if(this.innerText == "数学"){
            my$("box2").style.backgroundColor = "blue";
            this.style.backgroundColor = "blue";
        }else if(this.innerText == "外语"){
            my$("box2").style.backgroundColor = "red";
            this.style.backgroundColor = "red";
        }else{
            my$("box2").style.backgroundColor = "pink";
            this.style.backgroundColor = "pink";
        }
    }
    oAbj[i].onmouseout = function () {
        this.style.backgroundColor = "green";
        myA("p")[0].innerText = this.innerText;
        my$("box2").style.backgroundColor = "#ccc";
    }
}