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

html-css07

鼠标悬停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、for语句一行后面可以加step参数,请问是什么作用?为什么我加了step 5,执行和结果就变成了1<br>2<br>,也就是循环减半了。

step步长 a的取值依次为1、6、11 只有1 6 的时候才进入循环进行i++

所以只输出1 2

2、我查了相关资料,next后面可以接For后面的参数a,但我改成next a后出错,提示“语句未结束”?

据我所知next后不能跟参数的

3、结束循环用什么语句?

如果要跳出循环 可以用exit for

请采纳。

你要做的实际上是,含有超链接的元素,普通状态是隐藏的,当鼠标指向某个元素时,显示此隐藏元素。

所以,超链接实际上是html元素,而不是css属性值。

而 hover 是来控制这个元素显示和隐藏的。

最简单的代码类似:

.tip {display:none}

.exp:hover .tip{display:block} 

<p class="exp">鼠标指向显示连接内容

    <a href="http://www.ddcat.net/" class="tip">使用CSS隐藏这个a元素</a>

</p>

这里注意,ie6不支持非a元素的hover,所以要兼容ie6,需要使用js