div+css 几种和鼠标经过相关的特效_html/css_WEB-ITnose

1.第一种，鼠标经过的跟随信息显示：

...
.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 >

鼠标跟随111
这是第一个鼠标经过的效果1111111111111111111 11111111111111111111111111111 div >
a >
鼠标跟随222
这是第二个鼠标经过的效果2222222222222222222 22222222222222222222222222222 div >
a >
鼠标跟随333
这是第三个鼠标经过的效果2222222222222222222 22222222222222222222222222222 div >
a >
body >
html >

执行效果：


2.第二种,歌曲的曲目信息跟随显示效果：

title >
...

style >
head >

最新单曲 h3 >

            target ='_blank' > Jacky Cheung



  歌名: span > 不后悔 dd >
  歌手: span > 张学友 dd >
  介绍: span > 1999专辑... dd >
dl >
div >
a >
li >
ul >
body >
html >

执行效果：


3.第三种，鼠标经过图片的高亮显示：

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >



鼠标经过高亮显示 title >
...

style >
head >


      class ='highlightit'  width ="200"  height ="200"  border ="0"   />
a >
body >
html >

执行效果：
鼠标经过前：

鼠标经过后：


4.鼠标经过的区域变色效果：

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >


CSS实用鼠标经过变色 title >
head >
...
 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 >




Firefox b >


    Get Firefox with Google Toolbar  a >
  h3 > 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.
  Download Firefox - Free a > p >

div >

li >


Opera b >

Your life at your fingertips h3 > Try Speed Dial? in Opera's newest Web browser,
 Opera 9.20. It makes the fastest even faster. 
 href ="http://www.opera.com/download/get.pl?id=&thanks=true&sub=true" >
Download Opera for Windows a > p >

div >

li >


Explorer b >

Get Internet Explorer 7 for your operating system h3 >
Upgrade with confidence. Get downloads for Internet Explorer 7,
including recommended updates as they become available.

Internet Explorer 7 Download a > p >

div >

li >
ul >
body >
html >

执行效果：
  (1)鼠标经过Firefox:

  (2)鼠标经过Opera:

 (3)鼠标经过Ie Explorer: