JS实现div选单，颜色内容发生改变_div选中后变色-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61235733/article/details/141021182

要求：鼠标悬浮改变颜色和内容；移除鼠标颜色和内容也不变回来，只有移动到其他 “非小说” “小说”等div选单时，颜色内容才发生改变

效果图：
在这里插入图片描述

原码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>--鼠标悬停切换不同内容--</title>

    <style type="text/css">
        #main{
     
            width: 300px;
            height: 320px;
            border: 1px solid #E3E4E5;
            border-radius: 5%;
        }
        #top{
     
            width: 300px;
            height: 60px;
            /* border: 1px solid blue; */
        }
        #menu{
     
            width: 300px;
            height: 50px;
            /* border: 1px solid blue; */
        }
        .menu1{
     
            width: 90px;
            height: 50px;
            background: grey;
            position: relative;
            float: left;
            margin-left: 5px;
            display: flex;
            /* align-items: center;使垂直方向居中 */
            align-items: center;
            /* justify-content: center;使水平方向居中。 */
            justify-content: center;
        }
        .menu1:hover {
     
            background-color: aquamarine;
        }
        .wz{
     
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color: white;
        }
        #bottom{
     
            width: 300px;
            height: 210px;
            /* border: 1px solid #E3E4E5 */
            
        }
        .bottom-wz{
     
            font-size: 16px;
            color: rgb(40, 98, 185);
            text-align: center;
            display