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

html-css025

鼠标悬停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>

一个很常见的网站提示栏，一般常用于首页，会给出一行提示文字，用方框框起来，再附上一个关闭按钮，配上JS脚本，这样就实现了一个可以关闭的提示框，实际上代码是超简单的，但是功能却是很实用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

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

<head>

<title>可关闭的提示框</title>

<style>

#tips

{

position:relative

margin:0 auto

border:1px solid

#FA9150

padding:5px 10px 5px

10px

width:96%

background-color:#FEF1E9

line-height:160%

font-size:12px

}

#close

{

position:absolute

top:7px

right:8px

}

</style>

<script>

function

Close() {

document.getElementById("tips").style.display =

"none"

}

window.onload = function()

{

document.getElementById("tips").onclick =

Close

}

</script>

</head>

<body>

<p

id="tips">

虽然说至今尚无浏览器支持原生的父选择器效果，但是，我们是可以通过其他手段来实现父选择器效果的，虽说不是100%完全，但是，一般的项目需求都是可以满足的，如何实现呢？如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”。

这里介绍的“父选择器”技术，涉及多个技术tips，但是，幸运的是，这些特性从IE7浏览器开始都是支持的，因此，模拟父选择器效果兼容IE7+浏览器。

类似这样的技术tips学习，你唾沫横飞说得天花乱坠也不如一个活蹦乱跳的实例效果好。

.container {

min-height: 120px

/* z-index用来创建新的层叠上下文，这样子元素的z-index:-1不会超出容器

具体可参见：http://www.zhangxinxu.com/wordpress/?p=5115

*/

position: relativez-index: 1

}

.list {

/* 已经输入的姓名列表 */

display: inline-blockbackground-color: #f0f3f9

}

.list:after {

content: '×'

}

.input {

/* 去掉输入框默认UI */

width: 80pxborder: 0background: none

}

.border {

/* 尺寸永远和容器一样大，假装是容器 */

position: absoluteleft: 0right: 0top: 0bottom: 0z-index: -1

border: 1px solid #bbb

}

.input:focus + .border {

/* 模拟父选择器效果精髓所在 */

border-color: #1271E0

}

HTML代码：

<div class="container">

<span class="list">李易峰</span>

<span class="list">赵丽颖</span>

<span class="list">杨紫</span><input id="input" class="input">

<label class="border" for="input"></label>

</div>