div+css 几种和鼠标经过相关的特效
1.第一种,鼠标经过的跟随信息显示:
执行效果:
2.第二种,歌曲的曲目信息跟随显示效果:
执行效果:
3.第三种,鼠标经过图片的高亮显示:
执行效果:
鼠标经过前:
鼠标经过后:
4.鼠标经过的区域变色效果:
执行效果:
(1)鼠标经过Firefox:
(2)鼠标经过Opera:
(3)鼠标经过Ie Explorer:
<html>
<style>
.info
{
position:relative;
background:#fff;
color:#666;
text-decoration:none;
font-size:12px;
width:150px;
text-align:center;
border:1px solid #ccc;
height:25px;
line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover
{
background:#eee;
color:#333;}
.info div
{
display: none
}/*设置正常下的span为隐藏状态*/
.info:hover div /*设置hover下的span属性为呈现状态,并设置提示层的位置*/
{
display:block;
position:absolute;
top: 30px;
left:60px;
width:130px;
border:1px solid #ff0000;
background:#eee;
color:#000;
padding:5px;
text-align:left;}
</style>
<body>
<a class="info" href="#">鼠标跟随111
<div>这是第一个鼠标经过的效果1111111111111111111<br />11111111111111111111111111111</div>
</a>
<a class="info" href="#">鼠标跟随222
<div>这是第二个鼠标经过的效果2222222222222222222<br />22222222222222222222222222222</div>
</a>
<a class="info" href="#">鼠标跟随333
<div>这是第三个鼠标经过的效果2222222222222222222<br />22222222222222222222222222222</div>
</a>
</body>
</html>
<style>
.info
{
position:relative;
background:#fff;
color:#666;
text-decoration:none;
font-size:12px;
width:150px;
text-align:center;
border:1px solid #ccc;
height:25px;
line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover
{
background:#eee;
color:#333;}
.info div
{
display: none
}/*设置正常下的span为隐藏状态*/
.info:hover div /*设置hover下的span属性为呈现状态,并设置提示层的位置*/
{
display:block;
position:absolute;
top: 30px;
left:60px;
width:130px;
border:1px solid #ff0000;
background:#eee;
color:#000;
padding:5px;
text-align:left;}
</style>
<body>
<a class="info" href="#">鼠标跟随111
<div>这是第一个鼠标经过的效果1111111111111111111<br />11111111111111111111111111111</div>
</a>
<a class="info" href="#">鼠标跟随222
<div>这是第二个鼠标经过的效果2222222222222222222<br />22222222222222222222222222222</div>
</a>
<a class="info" href="#">鼠标跟随333
<div>这是第三个鼠标经过的效果2222222222222222222<br />22222222222222222222222222222</div>
</a>
</body>
</html>
执行效果:
2.第二种,歌曲的曲目信息跟随显示效果:
<html target="_blank">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;}
body {
margin:10px;
font-size: 13px;}
a:link {
color: #666;
text-decoration: none;/*去除链接下划线*/}
a:visited {
color: #666;
text-decoration: none;}
a:hover {
color: #F90;
}
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;}
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上边有一线条,与标题h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style:none;/*去除列表样式,这对于标准浏览器很重要*/}
a {
position: relative;/*设置其定位方法为相对定位,等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现,这样不用点中链接文字就可以响应链接*/}
a div {
display: none;/*初始化信息面板不显示*/}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度,高让它随内容多少自动调整*/
/*这是相对父级A的定位left:150px; top: 20px;*/
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效*/}
a img {
width:100px;
height:100px;
border:none;/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;
/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
left:5px;}
dl {
width: 120px;
height:100px;
float:right;
color: #999;
line-height:20px;}
dl dd span {
font-weight: bold;
color: #639;}
-->
</style>
</head>
<body>
<h3>最新单曲</h3>
<ul>
<li><a href='http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg'
target='_blank'>Jacky Cheung
<div>
<img src="http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg" alt="" />
<dl>
<dd><span>歌名:</span>不后悔</dd>
<dd><span>歌手:</span>张学友</dd>
<dd><span>介绍:</span>1999专辑...</dd>
</dl>
</div>
</a>
</li>
</ul>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;}
body {
margin:10px;
font-size: 13px;}
a:link {
color: #666;
text-decoration: none;/*去除链接下划线*/}
a:visited {
color: #666;
text-decoration: none;}
a:hover {
color: #F90;
}
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;}
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上边有一线条,与标题h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style:none;/*去除列表样式,这对于标准浏览器很重要*/}
a {
position: relative;/*设置其定位方法为相对定位,等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现,这样不用点中链接文字就可以响应链接*/}
a div {
display: none;/*初始化信息面板不显示*/}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度,高让它随内容多少自动调整*/
/*这是相对父级A的定位left:150px; top: 20px;*/
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效*/}
a img {
width:100px;
height:100px;
border:none;/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;
/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
left:5px;}
dl {
width: 120px;
height:100px;
float:right;
color: #999;
line-height:20px;}
dl dd span {
font-weight: bold;
color: #639;}
-->
</style>
</head>
<body>
<h3>最新单曲</h3>
<ul>
<li><a href='http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg'
target='_blank'>Jacky Cheung
<div>
<img src="http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg" alt="" />
<dl>
<dd><span>歌名:</span>不后悔</dd>
<dd><span>歌手:</span>张学友</dd>
<dd><span>介绍:</span>1999专辑...</dd>
</dl>
</div>
</a>
</li>
</ul>
</body>
</html>
执行效果:
3.第三种,鼠标经过图片的高亮显示:
<!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>鼠标经过高亮显示</title>
<style>
<!--
#html,body{background-color:#f0f0f0;}
.highlightit{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.5;
}
.highlightit:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
-->
</style>
</head>
<body>
<a style="text-decoration:none;cursor:text;" href="#">
<img src="http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg"
class='highlightit' width="200" height="200" border="0" />
</a>
</body>
</html>
"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>鼠标经过高亮显示</title>
<style>
<!--
#html,body{background-color:#f0f0f0;}
.highlightit{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.5;
}
.highlightit:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
-->
</style>
</head>
<body>
<a style="text-decoration:none;cursor:text;" href="#">
<img src="http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg"
class='highlightit' width="200" height="200" border="0" />
</a>
</body>
</html>
执行效果:
鼠标经过前:
鼠标经过后:
4.鼠标经过的区域变色效果:
<!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>CSS实用鼠标经过变色</title>
</head>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 11px;
}
/* The style starts here */
#tabs {padding:0; margin:0 0 0 15px; list-style:none;}
#tabs li {display:inline; padding:0; background:#f8f8f8; float:left; margin-right:35px; position:relative;}
#tabs li.one {width:190px;}
#tabs li.two {width:240px;}
#tabs li.three {width:190px;}
#tabs li a.outer-link {background:#f8f8f8; display:block; width:100%; position:relative;}
#tabs table {border-collapse:collapse; margin:-1px;}
#tabs li b {display:block; background:transparent url(tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px;
height:15px; font-size:0.9em; overflow:hidden;}
#tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;}
#tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;}
#tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;}
#tabs li a {color:#000; text-decoration:none;}
#tabs li a.inner-link {color:#c00; text-decoration:none;}
#tabs li a.inner-link:hover {text-decoration:underline; cursor:point;}
#tabs li.one:hover, #tabs li.one a.outer-link:hover {background:#fef;}
#tabs li.two:hover, #tabs li.two a.outer-link:hover {background:#cff;}
#tabs li.three:hover, #tabs li.three a.outer-link:hover {background:#ffc;}
</style>
<body>
<ul id="tabs">
<li class="one">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Firefox</b>
<div>
<h3><a class="inner-link" href="http://services.google.com/toolbar/firefox?hl=en_GB">
Get Firefox with Google Toolbar </a>
</h3><p>The award-winning Web browser just got better. It's free and easy
to use. Join the millions of people worldwide enjoying a better Web experience.<br />
<a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a></p>
<img src="mozilla.gif" alt="Mozilla Firefox" title="Mozilla Firefox" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="two">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Opera</b>
<div>
<h3>Your life at your fingertips</h3><p>Try Speed Dial™ in Opera's newest Web browser,
Opera 9.20. It makes the fastest even faster. <br />
<a class="inner-link"
href="http://www.opera.com/download/get.pl?id=&thanks=true&sub=true">
Download Opera for Windows</a></p>
<img src="opera.gif" alt="Opera for Windows" title="Opera for Windows" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="three">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Explorer</b>
<div>
<h3>Get Internet Explorer 7 for your operating system</h3>
<p>Upgrade with confidence. Get downloads for Internet Explorer 7,
including recommended updates as they become available.<br />
<a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">
Internet Explorer 7 Download</a></p>
<img src="ie7.gif" alt="Internet Explorer 7" title="Internet Explorer 7" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS实用鼠标经过变色</title>
</head>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 11px;
}
/* The style starts here */
#tabs {padding:0; margin:0 0 0 15px; list-style:none;}
#tabs li {display:inline; padding:0; background:#f8f8f8; float:left; margin-right:35px; position:relative;}
#tabs li.one {width:190px;}
#tabs li.two {width:240px;}
#tabs li.three {width:190px;}
#tabs li a.outer-link {background:#f8f8f8; display:block; width:100%; position:relative;}
#tabs table {border-collapse:collapse; margin:-1px;}
#tabs li b {display:block; background:transparent url(tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px;
height:15px; font-size:0.9em; overflow:hidden;}
#tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;}
#tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;}
#tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;}
#tabs li a {color:#000; text-decoration:none;}
#tabs li a.inner-link {color:#c00; text-decoration:none;}
#tabs li a.inner-link:hover {text-decoration:underline; cursor:point;}
#tabs li.one:hover, #tabs li.one a.outer-link:hover {background:#fef;}
#tabs li.two:hover, #tabs li.two a.outer-link:hover {background:#cff;}
#tabs li.three:hover, #tabs li.three a.outer-link:hover {background:#ffc;}
</style>
<body>
<ul id="tabs">
<li class="one">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Firefox</b>
<div>
<h3><a class="inner-link" href="http://services.google.com/toolbar/firefox?hl=en_GB">
Get Firefox with Google Toolbar </a>
</h3><p>The award-winning Web browser just got better. It's free and easy
to use. Join the millions of people worldwide enjoying a better Web experience.<br />
<a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a></p>
<img src="mozilla.gif" alt="Mozilla Firefox" title="Mozilla Firefox" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="two">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Opera</b>
<div>
<h3>Your life at your fingertips</h3><p>Try Speed Dial™ in Opera's newest Web browser,
Opera 9.20. It makes the fastest even faster. <br />
<a class="inner-link"
href="http://www.opera.com/download/get.pl?id=&thanks=true&sub=true">
Download Opera for Windows</a></p>
<img src="opera.gif" alt="Opera for Windows" title="Opera for Windows" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="three">
<!--[if lte IE 6]><a class="outer-link" href="nogo"><table><tr><td><![endif]-->
<b>Explorer</b>
<div>
<h3>Get Internet Explorer 7 for your operating system</h3>
<p>Upgrade with confidence. Get downloads for Internet Explorer 7,
including recommended updates as they become available.<br />
<a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">
Internet Explorer 7 Download</a></p>
<img src="ie7.gif" alt="Internet Explorer 7" title="Internet Explorer 7" />
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
执行效果:
(1)鼠标经过Firefox:
(2)鼠标经过Opera:
(3)鼠标经过Ie Explorer: