首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

设置了透明滤镜 火狐如何不支持 a:hover属性呢

2012-06-14 
设置了透明滤镜 火狐怎么不支持 a:hover属性呢html代码HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTM

设置了透明滤镜 火狐怎么不支持 a:hover属性呢
html代码

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="images/css/basic.css" rel="stylesheet" type="text/css" /><link href="images/css/global.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.flying-design.net/images/js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.flying-design.net/images/js/slides.min.jquery.js"></script><script  charset="utf-8"  type="text/javascript" src="images/js/login.js"></script></head><body>  <div id="photo_wall">  <div class="photo_top"></div>  <div class="photo_center">     <!--photo_list-->    <ul class="photo_list">      <li class="a1"><a href="#" target="_blank"><img width="220" height="354"   src="images/skins/photo/images/lanren-tuku.jpg" alt="张学友"    title="张学友"></a> </li>      <li class="a2"><img   src="images/skins/photo/images/1f473f38-1548-44dc-a012-8668d2eb5ccf.jpg"> <a href="#"   target="_blank"><strong>张震岳</strong><br>        <span>即将有5场演出</span><br>        查看详情</a> </li>      <li class="a3"><img   src="images/skins/photo/images/36c4f27a-e6a5-4ba2-b114-ded0f60280ed.jpg"> <a href="#"   target="_blank"><strong>蔡琴</strong><br>        <span>即将有4场演出</span><br>        查看详情</a> </li>      <li class="a4"><img   src="images/skins/photo/images/5e34e608-c406-4a4e-a13d-7ba75479b3db.jpg"> <a href="#"   target="_blank"><strong>郑钧</strong><br>        <span>即将有2场演出</span><br>        查看详情</a> </li>      <li class="a5"><img   src="images/skins/photo/images/d3a13a37-e663-4fb1-8039-3f65443c3c77.jpg"> <a href="#"   target="_blank"><strong>费玉清</strong><br>        <span>即将有4场演出</span><br>        查看详情</a> </li>      <li class="a6"><img   src="images/skins/photo/images/68b371d1-e2ec-4a52-a318-babc9a7c3224.jpg"> <a href="#"   target="_blank"><strong>陈绮贞</strong><br>        <span>即将有2场演出</span><br>        查看详情</a> </li>      <li class="a7"><img   src="images/skins/photo/images/1857d41d-4aed-436e-89d2-37a440b9bfb9.jpg"> <a href="#"   target="_blank"><strong>王力宏</strong><br>        <span>即将有6场演出</span><br>        查看详情</a> </li>      <li class="a8"><img   src="images/skins/photo/images/e39bbd6b-1d9b-4be7-a1d7-abbe6e8d166b.jpg"> <a href="#"   target="_blank"><strong>周杰伦</strong><br>        <span>即将有6场演出</span><br>        查看详情</a> </li>      <li class="a9"><img   src="images/skins/photo/images/cc958824-b2f5-426a-8e35-53eacef66adc.jpg"> <a href="#"   target="_blank"><strong>迈克学摇滚</strong><br>        <span>即将有1场演出</span><br>        查看详情</a> </li>      <li class="a10"><img   src="images/skins/photo/images/60679a11-f6e0-4374-9f6a-99dd0462668a.jpg"> <a href="#"   target="_blank"><strong>蔡依林</strong><br>        <span>即将有1场演出</span><br>        查看详情</a> </li>      <li class="a11"><img   src="images/skins/photo/images/193df31a-23ac-4f9a-b679-3fd7027d2db3.jpg"> <a href="#"   target="_blank"><strong>测试测试</strong><br>        <span>lanrentuku.com</span><br>        查看详情</a> </li>      <li class="a12"><img   src="images/skins/photo/images/78ea2f3b-0749-45d4-915d-8f3ae9528fbe.jpg"> <a href="#"   target="_blank"><strong>罗志祥</strong><br>        <span>即将有6场演出</span><br>        查看详情</a> </li>    </ul>    <!--/photo_list-->   </div>  <div class="photo_bottom"></div></div></body></html> 


这是css
CSS code
#photo_wall {    width:965px;    margin:-30px auto 0;}#photo_wall .photo_top {    background:url(../skins/photo/photo_top_bg.png) top left no-repeat;    height:10px;}#photo_wall .photo_center {    background:url(../skins/photo/photo_center_bg.png) top left repeat-y;    height:358px;}#photo_wall .photo_bottom {    background:url(../skins/photo/photo_bottom_bg.png) top left no-repeat;    height:10px;}#photo_wall .photo_list {    margin:0 auto;    width: 960px;    position: relative;    height: 357px}#photo_wall .photo_list a {    background: #ff0048;    filter: alpha(opacity=90);    left: 0px;    color: #fff;    font-family: 'microsoft yahei';    position: absolute;    top: 0px;}#photo_wall .photo_list a:hover {    color: #fff;}#photo_wall .photo_list a strong {    line-height: 2em}#photo_wall .photo_list .a1 {    left: 10px;    position: absolute;    top: 0px;}#photo_wall .photo_list .a2 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a3 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a4 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a5 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a6 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a7 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a8 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a9 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a10 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a11 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a12 {    left: 240px;    overflow: hidden;    width: 110px;    position: absolute;    top: 0px;    height: 110px}#photo_wall .photo_list .a2 a {    padding-right: 20px;    padding-left: 30px;    font-size: 18px;    padding-bottom: 15px;    overflow: hidden;    width: 182px;    padding-top: 45px;    height: 172px}#photo_wall .photo_list .a3 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a4 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a5 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a6 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a7 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a8 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a9 a {    padding-right: 20px;    padding-left: 20px;    font-size: 14px;    padding-bottom: 10px;    overflow: hidden;    width: 192px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a10 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a11 a {    padding-right: 10px;    padding-left: 10px;    font-size: 12px;    padding-bottom: 10px;    overflow: hidden;    width: 90px;    padding-top: 10px;    height: 90px}#photo_wall .photo_list .a12 a {    padding-right: 20px;    padding-left: 30px;    font-size: 18px;    padding-bottom: 15px;    overflow: hidden;    width: 182px;    padding-top: 45px;    height: 172px}#photo_wall .photo_list .a2 {    width: 232px;    height: 232px}#photo_wall .photo_list .a3 {    left: 238px;    top: 244px}#photo_wall .photo_list .a4 {    left: 360px;    top: 244px}#photo_wall .photo_list .a5 {    left: 480px;    top: 0px}#photo_wall .photo_list .a6 {    left: 602px;    top: 0px}#photo_wall .photo_list .a7 {    left: 480px;    top: 120px}#photo_wall .photo_list .a8 {    left: 602px;    top: 120px}#photo_wall .photo_list .a9 {    left: 480px;    width: 232px;    top: 244px}#photo_wall .photo_list .a10 {    left: 724px;    top: 0px}#photo_wall .photo_list .a11 {    left: 842px;    top: 0px}#photo_wall .photo_list .a12 {    left: 720px;    width: 232px;    top: 120px;    height: 232px} 


如图所示





[解决办法]
filter滤镜是微软专有的技术,不属于标准技术,只有IE支持。

兼容各浏览器的透明度CSS写起来比较麻烦,不过既然你已经加载了jQuery库,那就用jQuery来解决好了:
JScript code
$(document).ready( function() {    $("#photo_wall .photo_list a").fadeTo(0, 0.9);}); 

热点排行