鼠标放置标签页标签背景变色

有没有懂行的解释一下把鼠标放到标签标签背景变色是怎么实现的
有没有懂行的解释一下把鼠标放到标签标签背景变色是怎么实现的
有没有懂行的解释一下把鼠标放到标签标签背景变色是怎么实现的

新建t.html文件,并把下面的内容复制进去,用浏览器打开

<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <title>下载</title>
    <style>
        .hover-color {
            width: 100%;
            height: 50%;
            background-color: aqua;
        }
        .hover-color:hover {
            background-color: aliceblue;
        }
    </style>
</head>
<body style="width: 100%;height: 100%">
<div id="d1" class="hover-color">

</div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">

    </script>
</body>
</html>