jquery - 在CSS中隐藏滑动箭头按钮

Question

我有一个 jQuery slider ，两侧都有下一个和上一个箭头按钮。我希望这些按钮在响应时消失而不影响网站的其余部分我已经尝试了几个示例但无法让它工作。

HTML

<div id="w"> 
<nav class="slidernav">
  <div id="navbtns" class="clearfix">
  <a href="#" class="previous"><img src="img/arrowprev.png"/></a>

  <a href="#" class="next"><img src="img/arrownext.png"/></a>
</div>      
</nav>

CSS

/** media queries **/
@media screen and (max-width: 660px) {
  h1 { font-size: 2.4em; line-height: 1.2em; }

 .crsl-item h3 { font-size: 1.65em; }
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden;    line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; overflow: hidden; }
* html .clearfix { height: 1%; }


previous {

float: left;
margin-left: -3%;
margin-top: 10%;
position: absolute;
z-index: 999999;
opacity: 0.0;
}
.next {

float: left;
margin-left: -3%;
margin-top: 10%;
position: absolute;
z-index: 999999;
opacity: 0.0;
}

我在死胡同里。

Answer 1

您可以根据设备分辨率轻松地打开/关闭这两个按钮的显示属性。首先，将它们设置为可见(display:block)。其次，如果屏幕小于 660 像素(在此示例中)，则将显示切换为无。

.previous,
.next {
  display:block;
}

@media screen and (max-width: 660px) {
  .previous,
  .next {
    display:none;
  }
}