完整示例代码：
<!DOCTYPE HTML>
<html>
<meta charset="utf-8" />
<title>javascript实现hover效果</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
ul li {
list-style:none;
}
a {
text-decoration:none
}
.header {
height:45px;
}
.header-center {
height:100%;
margin:0 auto;
position:relative;
}
.hoverbox-h {
position:relative;
text-align:center;
margin:300px auto;
width:50px;
}
.hoverbox-h span {
height:45px;
line-height:45px;
background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
padding:5px 10px;
background-size:400% 400%;
border-radius:15px;
color:#fff;
font-size:13px;
}
.data-list {
display:none;
margin-top:-270px;
margin-left:-28px;
}
.data-list li {
height:45px;
line-height:50px;
background-color:#000;
color:#fff;
opacity:0.8;
width:100px;
margin:0 auto;
}
</style>
</head>
<body>
<header class="header">
<div class="header-center">
<div class="hoverbox-h" id="hoverbox">
<span>倍速</span>
<ul class="data-list" id="List">
<li>2.00X</li>
<li>1.50X</li>
<li>1.25X</li>
<li>1.00X</li>
<li>0.50X</li></ul>
</div>
</div>
</header>
</body>
<script type="text/javascript">
window.onload = function() {
//鼠标移入
document.getElementById("hoverbox").onmouseover = function() {
document.getElementById("List").style.display = "block";
this.style.boxShadow = " 0 2px 2px gray";
}
//鼠标移除
document.getElementById("hoverbox").onmouseout = function() {
document.getElementById("List").style.display = "none";
this.style.boxShadow = 'none';
}
}
</script>
</html>