常见的鼠标移动到链接出现浮动的图片效果

kevin-ying · 发表于 2014-3-10 01:01:06

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>常见的鼠标移动到链接出现浮动的图片效果 by: kevin-ying.com (源来如此)</title>
<style type="text/css">
.newlist-opt {
display: block;
}
.newlist-opt span {
position: relative;
z-index: 0;
}
.newlist-opt:hover {
background-color: transparent;
z-index: 50;
}
.newlist-opt span {
}
.newlist-opt span img {
border-width: 0;
padding: 2px;
position: absolute;
background-color: #FFFFE0;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: #000;
text-decoration: none;
padding: 5px;
}
.newlist-opt:hover img {
visibility: visible;
top: -30px;
left: 0px;
}
</style>
</head>
<body>
<div id="mainCon">
<a class="newlist-opt" href="#">1111111111111111111111<span><img
src="神奇的圖片URL" />
</span> </a>
<a class="newlist-opt" href="#">2222222222222222222222<span><img
src="神奇的圖片URL" />
</span> </a>
<a class="newlist-opt" href="#">3333333333333333333333<span><img
src="神奇的圖片URL" />
</span> </a>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			免费注册

[WEB前端] 常见的鼠标移动到链接出现浮动的图片效果