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

1.效果

2.代码

2.0 关键功能

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

2.1 HTML

<div id="box">
    <div id="project">
        <ul id="title">
            <li οnmοuseοver="change('girl')"><a href="#">女装</a></li>
            <li οnmοuseοver="change('boy')"><a href="#">男装</a></li>
            <li οnmοuseοver="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>