HTML中鼠标移动过去变换

最新推荐文章于 2022-06-14 19:58:16 发布

weixin_30711917

最新推荐文章于 2022-06-14 19:58:16 发布

阅读量191

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/gaobint/p/6269926.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>

转载于:https://www.cnblogs.com/gaobint/p/6269926.html

weixin_30711917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>...
复制链接

扫一扫