Question

美好的一天

我在2个元素，opacity元素和li元素上设置image。在hover效果下，我会消除不透明度。

问题：我正在使用媒体查询在手机上显示我的网站。问题是，当我为1024px设置媒体查询时，我想完全删除opacities，但是当视口低于1024px时它不会触发...也刷新

为什么：

代码：

HTML：

     <div id="app" class="span3">              
           <ul>
               <li id="apple"><a href="#" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a></li>
               <li id="android"><a href="#"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a></li>                     
           </ul>
     </div>

 and

 <div id="social" class="row-fluid">
        <div class="span7"> 
            <div id="app2">              
                <a href="https://itunes.apple.com/za/app/partyat/id597807299?mt=8" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a>
                <a href="https://play.google.com/store/apps/details?id=io.ik.partyat"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a>        
            </div>              
        </div>      
        <div class="span5">
            <a href="" title="PartyAt SA facebook page" target="_blank"><img src="images/fb.png" border="0" /></a>
            <a href="" title="PartyAt SA twitter page" target="_blank"><img src="images/twitter.png" border="0" /></a>             
        </div>
 </div>

CSS：

#app ul li{
        opacity:0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter:alpha(opacity=70);
        padding-bottom: 15px;
    }

 #social .span5 img {
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter:alpha(opacity=70);
    }

媒体查询：

@media screen and (max-width: 1024px;){
 #app ul li {
        opacity:1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
        padding-bottom: 15px;
        }

 #social .span5 img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
 }

}

Answer 1

您的媒体查询可能正常，但在此之后，您将覆盖它：

@media screen and (max-width: 1024px;){
    /* your custom styles... */
    #app ul li { opacity:1; }
}

/* normal styles */
#app ul li { opacity:0.7; }

因此，您可以使用!important来避免冲突：

#app ul li { opacity:1 !important; }

警告：如果有更好的解决方案，则不应使用!important。请阅读以下内容：

当两个CSS规则发生冲突时，优先顺序为：

!important的规则具有最高优先级
内联样式更重要（例如<div class="someclass" style="inline style"></div>比普通样式
更具体的规则＆gt;不太具体（#one .example tag .yeah＆gt; .yeah）
如果两个规则具有相同的优先级，则应用最后一个规则

因此，检查您的CSS以了解发生了什么。也许你可以将媒体查询移到样式表的末尾......

如果您仍然遇到问题，请发布一个完整的示例。

Answer 2

检查您是否有多个同一项目的来电。这就是发生在我身上的事。它们全部堆叠在一起，形成了一个坚固的物品！

媒体查询中未设置元素的不透明度

2 个答案: