Question

这是我的代码：Codepen

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

     }

设置媒体查询以在700px以下更改页面样式。我希望所有的：悬停样式在顶部导航中消失，但我不能让它们消失。

另外，我遇到了.sidebar元素和底部重叠的固定页脚的问题。我在身体底部添加了边距，并没有修复它。

有什么建议吗？

Answer 1

只需将：hover规则放入这样的查询中： http://codepen.io/anon/pen/pjNRam

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

Answer 2

您需要做的就是添加：

nav ul li：hover

在媒体查询中。选择器有点过于具体，您应该避免它，否则您将在项目后期的覆盖内容中遇到问题。同样尝试使用课程。

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

2 个答案: