微信公众号 
图码生活

每天发布有五花八门的文章,各种有趣的知识等,期待您的订阅与参与
电脑报 1992-2001 十年文章全集
电脑报 1992-2001 十年文章全集
包含从 1992 年 - 2001 年间,两万余篇期刊文章,查询最少输入两个字符
随便看看
读取中
读取中
标题CSS高级应用技巧一例
栏目网络与通信
作者网思工作室netsea
发布2001年9期
  超酷的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>