【HTML】- 鼠标移动时内容进行切换

1.效果

2.代码

2.0 关键功能

onmouseover="change('girl')" 函数的功能是鼠标放上时触发执行，change()方法中的参数‘girl’和后面的id=‘gril’进行了绑定，所以当鼠标放上时，根据参数显示响应的区域。 
css样式中：display: flex;为flexbox布局，默认水平方向布局。

2.1 HTML

<div id="box">    <div id="project">        <ul id="title">            <li onmouseover="change('girl')"><a href="#">女装</a></li>            <li onmouseover="change('boy')"><a href="#">男装</a></li>            <li onmouseover="change('child')"><a href="#">童装</a></li>        </ul>        <ul id="content">            <li class="girl" id="girl">                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服饰的变迁是一部历史，是一个时代发展的缩影。它是这个时代进步、文明、兴旺发达、繁荣昌盛的象征。                它在记录历史变革的同时，也映衬着一种民族的文化，传承着当地的历史文化风俗，女装更是其中不可缺少的一部分。                女士穿着的衣物统称为女装。女装品牌与款式的多元化推动了时装的发展。</p></li>            <li class="boy" id="boy">                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;男装是指男性穿于人体起保护和装饰作用的服饰制品。包括上装和下装，男装会根据季节和个人的不同有不同的款式和作用。</p></li>            <li class="child" id="child">                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;儿童服装简称童装，指适合儿童穿着的服装。按照年龄段分包括婴儿服装、幼儿服装、小童服装、中童服装、大童服装等。还包括中小学的校园服装等。按照衣服的类型分为：连体服，外套，裤子，卫衣，套装，T恤衫，鞋等。</p></li>        </ul>    </div></div>

2.2 CSS

<style>    *{        margin: 0;        padding: 0;    }    body{        font-family: Verdana, Arial, Helvetica, sans-serif;        font-size: 12px;        color: #222222;    }    #box #project{        width: 800px;        margin: 20px auto;        display: flex;        border: 1px solid #ff6666;    }    #box #project #title{        list-style: none;        text-align: center;        margin: 5px 5px auto;    }    #box #project #title li{        width: 15px;        margin-bottom: 20px;        font-size: 16px;        background-color: #FF8C00;        padding: 6px;        border:1px solid #cccccc;        border-radius: 6px;    }    #box #project #title li:hover{        background-color: #ff6666;    }    #box #project a{        color: #000000;        text-decoration: none;    }    #box #project #content{        list-style: none;        font-size: 14px;        margin: 10px;    }    .girl{        display: block;    }    .boy{        display: none;    }    .child{        display:none;    }

2.3 Javascript

<script>   function change(name) {       if (name =='girl'){           girl.style.display = 'block'           boy.style.display = 'none'           child.style.display = 'none'       }else if(name == 'boy'){           girl.style.display = 'none'           boy.style.display = 'block'           child.style.display = 'none'       }else if(name == 'child'){           girl.style.display = 'none'           boy.style.display = 'none'           child.style.display = 'block'       }   }</script>