CSS高级应用技巧一例

Author: 网思工作室netsea Date: 2001年 9期

#1    超酷的hover效果
      超链接的hover效果一直很让我心动,不过今天我要说的可不是这个,我要让整个层都具有hover效果。(我用的是DW4,若你用的是FrontPage也无妨,就让表格也具有hover效果好了。)你别急,我可不是说大话,不信你可去我家看看!如果你怕麻烦,就试试下面的代码好了。
      <style type="text/css">
      .mouseout{ ??
      BACKGROUND-COLOR: #3399ff; BORDER-BOTTOM: #3399ff 2px solid;??
      BORDER-LEFT: #3399ff 2px solid; BORDER-RIGHT: #3399ff 2px solid;??
      BORDER-TOP: #3399ff 2px solid; COLOR: black; LETTER-SPACING: -0.5pt;??
      LINE-HEIGHT: 11pt;}?牓?
      .mouseover{ ??
      BACKGROUND-COLOR: #0099ff; BORDER-BOTTOM: #003399 2px solid;??
      BORDER-LEFT: #99ccff 2px solid; BORDER-RIGHT: #003399 2px solid;??
      BORDER-TOP: #99ccff 2px solid; COLOR: white; LETTER-SPACING: -0.5pt;??
      LINE-HEIGHT: 11pt;}??
      </style>
      //以下代码加到<body>和</body>之间
      <div name="hover" class="mouseover" style="position:absolute; left:22px; top:20px;??
      width:156px;height:68px;z-index:1"
      onmouseover="this.className='mouseover'"
      onmouseout="this.className='mouseout'"><br><p>把鼠标移到上面试试</p></div>