鼠标悬停tip效果如何用css实现？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标悬停tip效果如何用css实现？相关的知识，希望对你有一定的参考价值。
参考技术A 鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这
个tip中，不影响页面美观而又能很好的传达信息。
应用div
css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div
，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去
的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
鼠标悬停tip效果实例
CSS代码
a#tip
position:relative;left:30px;top:30px;
a#tip:link
text-decoration:none;color:#c00;display:block
a#tip:hover
text-decoration:none;color:#000;display: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:relative;left:30px;top:30px;
a#tip:link
text-decoration:none;color:#c00;display:block
a#tip:hover
text-decoration:none;color:#000;display: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>
css如何实现鼠标悬停的提示效果
求一个demo，效果如下图。
鼠标悬停时出现提示“任务中心”。
不要只给一个思路，要具体代码，谢谢。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*margin:0;padding:0;
ullist-style-type: none;
ul>lifloat:left;margin-right: 10px;position: relative;width:100px;
li>spandisplay: none;position: absolute;top: 20px;background: #ccc;
li:hover >spandisplay: block;
</style>
</head>
<body>
<ul>
<li>提示<span>任务中心</span></li>
<li>提示<span>通知</span></li>
<li>提示<span>装扮</span></li>
</ul>
</body>
</html> 参考技术A 建议你看一下这个教程，很详细的解释也有代码：http://www.w3school.com.cn/cssref/selector_hover.asp追问
这个我会用，它只能改变该对象样式属性，不可以用来作用其它对象吧？
追答a标签..
以上是关于鼠标悬停tip效果如何用css实现？的主要内容，如果未能解决你的问题，请参考以下文章