鼠标悬停tip效果如何用css实现？

html-css017

鼠标悬停tip效果如何用css实现？,第1张

鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的

内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这

个tip中，不影响页面美观而又能很好的传达信息。

应用div

css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div

，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去

的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。

鼠标悬停tip效果实例

CSS代码

a#tip

{position:relativeleft:30pxtop:30px}

a#tip:link

{text-decoration:nonecolor:#c00display:block}

a#tip:hover

{text-decoration:nonecolor:#000display:block}

a#tip

span

{display:none}

a#tip:hover

#tip_info

{

display:block

border:1px

dashed

#c00

background:#fff

padding:1px

position:absolute

top:0px

left:120px

}

鼠标悬停tip效果实例

XHTML代码

<a

id="tip"

href="http://www.zlbiz.com">【www.zlbiz.com】

<span

id="tip_info">

<img

src="http://www.zlbiz.com/skins/logo3.gif"

alt="www.zlbiz.com"

width="200"

height="90"

/>

</span>

</a>

查看鼠标悬停tip运行效果

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=utf-8"

/>

<title>www.zlbiz.com</title>

<style

type="text/css">

body

{font:normal

14px

宋体}

a#tip

{position:relativeleft:30pxtop:30px}

a#tip:link

{text-decoration:nonecolor:#c00display:block}

a#tip:hover

{text-decoration:nonecolor:#000display:block}

a#tip

span

{display:none}

a#tip:hover

#tip_info

{

display:block

border:1px

dashed

#c00

background:#fff

padding:1px

position:absolute

top:0px

left:120px

}

</style>

</head>

<body>

<a

id="tip"

href="http://www.zlbiz.com">【www.zlbiz.com】

<span

id="tip_info"><img

src="http://www.zlbiz.com/skins/logo3.gif"

alt="www.zlbiz.com"

width="200"

height="90"

/></span>

</a>

</body>

</html>

1、首先新建一个html文件，命名为test.html，在test.html文件内，使用table标签创建一个表格，用于测试。

2、在test.html文件内，设置table标签的class属性为mytable，同时设置边框为1px。

3、接着在css标签内，通过class设置表格的样式，定义它的宽度为300px,高度为200px。

4、在css标签内，通过td元素名称和“:hover”选择器定义当鼠标指向单元格时，改变单元格的背景颜色，设置为红色。

5、最后在浏览器打开test.html文件，鼠标经过之后，即可变色。

试试这个.

图片我用的(

new:

http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_03.png

old:

http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_12.png

)只能上传一个,自己下载下吧

<html>

<head>

<script>

window.onload = function()

{

img1.style.clip = "rect(0 256 256 0)"

img2.style.clip = "rect(0 256 0 0)"

}

function showNew()

{

window.clearInterval(myTime)

var i=0

var myTime = window.setInterval(function()

{

img1.style.clip = "rect("+ i +" 256 256 0)"

img2.style.clip = "rect(0 256 "+ i +" 0)"

i+=16

if(i>256)

{

window.clearInterval(myTime)

}

},1)

}

function showOld()

{

var i=0

var myTime = window.setInterval(function()

{

img1.style.clip = "rect("+ (256-i) +" 256 256 0)"

img2.style.clip = "rect(0 256 "+ (256-i) +" 0)"

i+=16

if(i>256)

{

window.clearInterval(myTime)

}

},1)

}

</script>

</head>

<body>

<div>

<img id="img1" src="old.png" style="position:absolute" onmouseover="showNew()" />

<img id="img2" src="new.png" style="position:absolute" onmouseout="showOld()" />

</div>

</body>

</html>