如何清除：移动设备的悬停样式？

这里是我的codepen：Codepen 如何清除：移动设备的悬停样式？

.sidebar{ 
     width: 100%; 
     position: static; 
     display: block; 
     padding: 50px; 
     margin: 0px; 
     height: 562px; 
     border: none; 
     border-top: 1px solid black; 
     margin-bottom: 5%; 

    }

我设定一个媒体查询时改变700像素下样式的页面。我希望所有的：悬停样式在顶部导航上消失，但我无法让它们消失。

此外，我遇到了.sidebar元素和固定页脚在底部重叠的问题。我在身体的底部添加了边距，但没有解决问题。

有什么建议吗？

来源

2015-09-26 Michael Bowen

为什么不只添加：悬停只有_over_某个屏幕宽度？ – jmargolisvt

我建议使用移动第一种方法进行开发 - 通过这种方式，您可以先为700px以下的屏幕定义样式（省略悬停样式），然后使用媒体查询，当屏幕大于700像素时将悬停状态添加到项目 – Jackson

只要把：悬停规则到这样的疑问： http://codepen.io/anon/pen/pjNRam

@media (min-width: 700px){ 
    nav ul li:hover{ 
    background: #e92121; 
    color: #fff; 
    padding: 10px; 
    font-size: 22px; 
    } 
}

来源

2015-09-26 20:33:14 cuddlecheek

所有你需要做的就是添加了：

导航UL李：悬停

媒体查询中。选择器有点太具体，你应该避免它，否则你会在项目后期重写的东西中遇到问题。以及尝试使用类。

来源

2015-09-26 20:45:38 Dragod83

如何清除：移动设备的悬停样式？

回答

相关问题