zoukankan      html  css  js  c++  java
  • HTML中鼠标移动过去变换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style type="text/css">
                *{
                    margin:0px;
                    padding:0px;}
                #kuang{
                    width:100%;
                    height:400px;
                    border:1px solid black;
                    position:relative;}
                #choose{
                    width:30%;
                    height:400px;
                    background-color:#0C6;
                    position:relative;
                    float:left;
                    text-align:center;}
                #picture{
                    width:60%;
                    height:400px;
                    background-color:#9C0;
                    position:relative;
                    float:right;}
                #choose ul li{
                    background-color: silver;
                    list-style-type: none;}
                #pic2,#pic3{
                    display:none;}
                
            </style>
        </head>
        
        <body>
        <div id="kuang">
            <div id="choose">
                <ul>
                    <li onmouseover="change('pic1',this)" onmouseout="change2(this)">AAA</li>
                    <li onmouseover="change('pic2',this)" onmouseout="change2(this)">BBB</li>
                    <li onmouseover="change('pic3',this)" onmouseout="change2(this)">CCC</li>
                </ul>
            </div>
            <div id="picture">
                <div id="pic1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
                <div id="pic2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
                <div id="pic3">ccccccccccccccccccccccccccccc</div>
            </div>
        </div>
        </body>
    </html>
    <script type="text/javascript">
        function change(val,obj){
            obj.style.backgroundColor="#FFC12D";
            if(val=='pic1'){
                pic1.style.display='block';
                pic2.style.display='none';
                pic3.style.display='none';
                }else if(val=='pic2'){
                pic1.style.display='none';
                pic2.style.display='block';
                pic3.style.display='none';
                }else if(val=='pic3'){
                pic1.style.display='none';
                pic2.style.display='none';
                pic3.style.display='block';
                }
            }
        function change2(val){
            val.style.backgroundColor="silver";
            }
    </script>
  • 相关阅读:
    less本地环境输出hello-world
    HTML中的SEO和HTML语义化
    JS连等赋值的坑
    React官网首页demo(单文件实现版)
    高并发高可用的架构实践-静态架构蓝图(二)
    高并发高可用的架构实践-设计理念(一)
    云计算+区块链=BaaS
    001/Nginx高可用模式下的负载均衡与动静分离(笔记)
    001---mysql分库分表
    004--PowerDesigner设置显示1对多等关系
  • 原文地址:https://www.cnblogs.com/gaobint/p/6269926.html
Copyright © 2011-2022 走看看