js鼠标悬停显示文字的实例介绍?

JavaScript035

js鼠标悬停显示文字的实例介绍?,第1张

如<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

1、<html>

2、<head>

3、<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

4、<title>JS教程:鼠标悬停时显示文字或显示图片</title>

5、<script language="javascript">

6、functionshowPic(sUrl{varx,yx=event.clientXy=event.clientYdocument.getElementById("Layer1").style.left=xdocument.getElementById("Layer1").style.top=ydocument.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"  document.g

7、function hiddenPic(){ document.getElementById("Layer1").innerHTML = ""document.getElementById("Layer1").style.display = "none"}

8、</script>

9、</head>

10、<body>

11、<div id="Layer1" style="display:noneposition:absolutez-index:1"></div>

12、<img src="#########" onmouseout="hiddenPic()"

13、onmousemove="showPic(this.src)" title="wowowowo" />   //此行title实现悬停时显示文字onmousemove实现显示图片

14、<p></p>

15、</body>

16、</html>

效果你自己看吧,代码拷贝了就能用,记得引用jq文件

给你写了大概的功能,链接什么的,你自己加上就行,懒得找图片,直接用的背景色举例吧

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>测试</title>

<script src="jquery.min.js"></script>

<style>

.bg{margin:20px autowidth:400pxheight:400px}

.half{width:50%height:50%float:leftcolor:white}

.half ul{display:none}

.blue{background:blue}

.green{background:green}

.red{background:red}

.orange{background:orange}

</style>

<script type="text/javascript">

$(function(){

$(".half").each(function(index,element){

$(this).hover(function(){

$(this).children().show()

},function(){

$(this).children().hide()

})

})

})

</script>

</head>

<body>

<div class='bg'>

<div class='half blue'>

<ul>

<li><a href=''>测试测试连接1</a></li>

<li>测试测试连接2</li>

</ul>

</div>

<div class='half green'>

<ul>

<li>测试测试连接1</li>

<li>测试测试连接2</li>

</ul>

</div>

<div class='half red'>

<ul>

<li>测试测试连接1</li>

<li>测试测试连接2</li>

</ul>

</div>

<div class='half orange'>

<ul>

<li>测试测试连接1</li>

<li>测试测试连接2</li>

</ul>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>

RunJS 演示代码

</title>

<style>

#content{

text-overflow: ellipsis

                overflow: hidden

                white-space: nowrap

width:200px

}

</style>

<script>

onload = function(){

content.onmouseover = function(){

this.title = this.innerHTML

}

}

</script>

  </head>

<body>

    <div id='content'>

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

  </div>

  </body>

</html>