css code area
<style>
*{
padding:0px;
margin:0px;
}
.box{
margin:100px auto;
width:400px;
height:600px;
background-color:#ccc;
}
ul{
width:350px;
height:400px;
margin:0px auto;
list-style:none;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
ul > li {
width:100px;
height:100px;
background-color:green;
margin-top:15px;
text-align:center;
}
.text{
width:350px;
height:100px;
background-color:white;
margin:0px auto;
margin-top:80px;
text-align:center;
}
ul > li > h2 {
margin-top:10px;
color:white;
}
.active{
background-color:pink;
}
</style>
html ward
<body>
<div class="box">
<ul>
<li class="active"><h2>1</h2><h2>JAN</h2></li>
<li><h2>2</h2><h2>FER</h2></li>
<li><h2>3</h2><h2>MAR</h2></li>
<li><h2>4</h2><h2>APR</h2></li>
<li><h2>5</h2><h2>MAY</h2></li>
<li><h2>6</h2><h2>JUN</h2></li>
<li><h2>7</h2><h2>JUL</h2></li>
<li><h2>8</h2><h2>AUG</h2></li>
<li><h2>9</h2><h2>SEP</h2></li>
<li><h2>10</h2><h2>OCT</h2></li>
<li><h2>11</h2><h2>NOV</h2></li>
<li><h2>12</h2><h2>DEC</h2></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>一言九鼎</p>
</div>
</div>
</body>
js code
<script>
window.onload=function(){
var arr=[
'一言九鼎',
'二三其德',
'三心二意',
'四通八达',
'五颜六色',
'六六大顺',
'七上八下',
'八仙过海',
'九牛一毛',
'十全十美',
'生意兴隆',
'身体健康',
];
var list=document.getElementsByTagName("li");
var Dtext=document.getElementsByTagName('div')[1];
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onmouseover=function(){
for(var i=0;i<list.length;i++){
list[i].className="";
}
this.className="active";
Dtext.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
};
}
};
</script>
