html指针移动时变色,案例一 鼠标经过事件，变色 移动

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

二．例：

饿哦

额，额，额

取想想天哥

博毛福禄寿

红草拨清波

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

//       console.log(z);

z.οnmοuseοver=function(){

z.style.color='cyan';

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

}

z.οnmοuseοut=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(/\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].οnmοuseοver=function(){

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

this.style.background='white';

}

se[i].οnmοuseοut=function(){

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

this.style.background='cyan';

}

}