JS鼠标隐藏

JavaScript021

JS鼠标隐藏,第1张

用样式

<style type="text/css">

BODY{CURSOR: url('http://www.baidu.com/favicon.ico')}

</style>

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#demo1, #demo2 {

width:500px

height:300px

border:1px solid #CCC

}

#demo1 { background-color:#9FFmargin-bottom:10px}

#demo2 { background-color:#FFC}

</style>

<script type="text/javascript">

function showCoords(e, obj) {

var e = window.event || e

var arCoords = [e.clientX, e.clientY]

obj.getElementsByTagName('p')[1].getElementsByTagName('span')[1].innerHTML = 'X:' + arCoords[0] + ',Y:' + arCoords[1]

}

window.onload = function() {

document.getElementById('demo1').onmousemove = function(event) { showCoords(event, this)}

document.getElementById('demo2').onmouseover = function(event) { showCoords(event, this)}

}

</script>

</head>

<body>

<div id="demo1">

<p>mousemove测试</p>

<p><span>当前坐标:</span><span></span></p>

</div>

<div id="demo2">

<p>mouseover测试</p>

<p><span>当前坐标:</span><span></span></p>

</div>

</body>

</html>

通过这个 可以判断鼠标移动的情况。这样 你需要去监听 当前坐标的值 。

每几秒监听下值 是否变化,如果不变。

就用CSS样式

BODY{CURSOR: url('空白图片url')}

去把鼠标 换个图片。

一个div的鼠标滑过隐藏后,就再也滑不上了。因为页面已经看不见它了。

所以应该鼠标滑过一个div,让另一个div显示和隐藏,下面是简单代码,仅供参考:

<style>

    div {width:100px height:100px background:#cccmargin:10px}

</style>

<body>

    <div id='div1'></div>

    <div id='div2'></div>

</body>

<script>

    var oDiv1 = document.getElementById('div1')

    var oDiv2 = document.getElementById('div2')

    oDiv1.onmouseover = function(){

        oDiv2.style.display = 'none'

    }

    oDiv1.onmouseout = function(){

        oDiv2.style.display = 'block'

    }

</script>