内容。而鼠标悬停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