在CSS中hover是指鼠標移入和移出兩個事件，利用CSS實現這個效果非常的簡單，可是如果放在JS中，我們就必須解析成兩個事件：onmouseover和onmouseout。做起來的話相對於CSS略顯復雜，這里我便分享一下我利用JS實現此效果的過程，這是我在制作選項卡時用到的，因此大家也可以看看選項卡是怎么制作的。
首先在HTML中設置三個input按鈕和三個div(選項卡的內容)：代碼如下：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input{
background: white;}
.yellow{background: yellow}
div{width:200px;height:200px;background: red;display: none}
</style>
</head>
<body>
<input class="white" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block">111</div>
<div>222</div>
<div>333</div>
</body>
此時你會發現頁面上有三個按鈕的一個DIV，我們就是利用選中一個按鈕，一個div的display變為block,其他的變成none來實現的。代碼如下：
<script type="text/javascript">
window.onload= function () {
var but=document.getElementsByTagName("input");
var odiv=document.getElementsByTagName("div");
for(var i=0;i<but.length;i++){
but[i].index=i;
but[i].onclick= function () {
for(var i=0;i<but.length;i++){
but[i].className="";
odiv[i].style.display="none";
}
this.className="yellow";
odiv[this.index] .style.display="block";
}
}
};
</script>