web前端鼠标点击超链接出现隐藏文字

html-css029

web前端鼠标点击超链接出现隐藏文字,第1张

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签中,输入js代码:

$('button').click(function () {$('div').css('display', 'block')})

3、浏览器运行index.html页面,会有个显示按钮。

4、点击显示按钮,此时被隐藏的内容显示了出来。

<!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')}

去把鼠标 换个图片。