标题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>