自由者CG

标题: div或table正常显示半透明效果，鼠标悬浮不透明 [打印本页]

---

作者: Freeman    时间: 2016-3-16 08:37
标题: div或table正常显示半透明效果，鼠标悬浮不透明
我们在做网页时，经常碰到想在页面某位置加入广告，但又不想它看上去太突出，所以可以用到下面的效果。
正常显示半透明，当用户鼠标移动到广告上时，100%不透明显示。

效果图：正常显示：
(, 下载次数: 7)

上传

点击文件名下载附件

鼠标悬浮table或div上
(, 下载次数: 8)

上传

点击文件名下载附件

实现代码：

1. <style type="text/css">
   
2. .zqm tr td{opacity: 0.3;filter: alpha(opacity=30);}                           /*正常显示透明度为30%*/
   
3. .zqm tr td:hover{opacity: 1;filter: alpha(opacity=100);}                  /*鼠标悬浮，显示为不透明度100%*/
   
4. </style>
   
5. <table class="zqm" width="950">
   
6.   <tr>
   
7.     <td><font color="FF8C00">欢迎来到</font>
   
8. <a href="http://bbs.zhise168.com"><font color="ff0000">自由者CG网</font></a>
   
9. <b><a href="http://bbs.zhise168.com/thread-16-1-1.html" target=_blank><font color="FF33FF">点这里免费得金币</font></a></b>【<font color="#CCCCCC">这是默认签名,</font><a href=/home.php?mod=spacecp&ac=profile&op=info target=_blank><font color="ff0000">更换签名点这里</a></font>】
   
10. <p><b><a href="http://bbs.zhise168.com/type-55-4-1.html"><font color="ff0000" size="+2">举报无效资源和链接有奖</font></a></b></p>
    
11. </font></td>
    
12.   </tr>
    
13. </table>

复制代码

---

欢迎光临 自由者CG (https://bbs.zhise168.com/)

Powered by Discuz! X3.4