案例一 鼠标经过事件,变色 移动

一. 鼠标经过字体内容和背景变色

二.例:


饿哦

额,额,额

取想想天哥

博毛福禄寿

红草拨清波


        var z=document.getElementsByClassName('zi')[0];

//       console.log(z);

        z.onmouseover=function(){

            z.style.color='cyan';

            document.body.style.background='pink';

        }

          z.onmouseout=function(){

               z.style.color='orange';

            document.body.style.background='purple';

          }





二.输入框内容点击按钮移动到另一个输入框

例:

    

    Document

    

select{width:100px;height:85px;}

div{display:inline-block;width:50px}

    

Argentina

    Brazil

    Canada

    Chile

    China

    Cuba

    Denmark

    Egypt

    France

    Greece

    Spain


>>

>

<

<<

      var ar=[],se=[];

        ar=unsel.innerHTML.replace(/\s+/,'')

                           .slice(8,-13)

                           .split(/<\/option>\s*

        console.log(ar);

        function move(bt){

        switch(bt.innerHTML){

            case '>>':

                se=se.concat(ar);

                ar=[];

                break;

            case '>':


            case '<':

            case '<<':

                ar=ar.concat(se);

                se=[];

                break;


        }

             update(ar,unsel);

            update(se,sel);


        }

        function update(arr,sel){

            sel.innerHTML=''+arr.join('')+'';

        }


一.导航

例:

    

    Document

    

        *{

            margin: 0;

            padding: 0;

           list-style: none;

        }

        ul{

            width:1200px;

            height: 50px;

            float: left;

            line-height: 50px;

            background: cyan;

            margin: 0 auto;

        }

        li{

        float: left;

            width: 100px;



        }

        a{

            width: 100px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            color:white;

        }


    

        

  • 主页
  • 主播
  • 好咯
  • 好咯


  •     

           var se=document.querySelectorAll('ul>li');

            for(var i=0;i

                se[i].onmouseover=function(){

                    this.firstElementChild.style.color='cyan';

                    this.style.background='white';

                }

                 se[i].onmouseout=function(){

                    this.firstElementChild.style.color='white';

                    this.style.background='cyan';

                }

            }

    ©著作权归作者所有,转载或内容合作请联系作者
    【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    相关阅读更多精彩内容

    • "use strict";function _classCallCheck(e,t){if(!(e instanc...
      久些阅读 6,187评论 0 2
    • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
      lilyping阅读 5,909评论 0 1
    • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
      剑残阅读 13,301评论 0 8
    • 案例1:导航条 Css部分: *{ list-style: none; margi...
      纪美阅读 1,297评论 0 1
    • 雨 深夜入耳 整个屋渐凉了 你在另一个空间独享雨滴敲窗的美妙 我在这里陪你独醉 心念的人啊! 是什么让我融化在了你...
      灵滴阅读 2,682评论 0 1

    友情链接更多精彩内容