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

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

WBOY
WBOYOriginal
2016-06-24 12:28:521355Durchsuche

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:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn