span标签的鼠标滑入提示_要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟...

1

2

3

4

5

6

7

Document

8

9 #sign{

10 display: inline-block;

11 width: 15px;

12 height: 15px;

13 border: 1px solid #ccc2c2;

14 }

15 #tip{

16 width: 150px;

17 height: 70px;

18 ">);

19 border: 1px solid orange;

20 color: rgb(161, 59, 48);

21 display: none;

22 opacity: 1;

23 }

24

25

26

27

28 自动登录

29

为了您的安全请不要在网吧等公共场所使用！

30

31

32 var osign = document.getElementById("sign");

33 var tip = document.getElementById("tip");

34 var timer;

35 var oo=1;

36 //鼠标移入时显示提示信息(让提示框的隐藏效果消失)

37 osign.onmouseover = function(){

38 //清除延时器以免出现闪烁

39 clearInterval(timer);

40 tip.style.display = "block";

41 tip.style.opacity=1;

42 }

43

44 //鼠标离开,信息消失，隐藏效果延迟

45 osign.onmouseout = function(){

46 clearInterval(timer);

47 timer = setInterval(function(){

48 //让透明度渐减，直至为零

49 oo -= 0.1;

50 tip.style.opacity=oo;

51 if(oo == 0){

52 clearInterval(timer);

53 }

54 },70);

55 //最后复原透明度，成为下次的开始值

56 oo=1;

57 }

58

59