第一个孩子/最后一个孩子不同的悬停样式

用户3628807

我想用左侧Previous较暗的一侧为和右侧较暗的一侧制作渐变效果Next。这是我到目前为止尝试过的：https : //jsfiddle.net/jn87640p/4/

我错过了什么？

.calnav {
  font-size: 1.3em;
  color: #000;
  height: 35px;
  line-height: 35px;
  border-radius: 8px;
  background: white;
}

.calnav:first-child:hover {
  background: #537d8d;
  background: -moz-linear-gradient(left, rgba(33, 21, 32, 1) 0%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(33, 21, 32, 1) 0%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(33, 21, 32, 1) 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211520', endColorstr='#00ffffff', GradientType=1);
  /* IE6-9 */
}

.calnav:last-child:hover {
  background: #537d8d;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(253, 253, 253, 0) 1%, rgba(37, 26, 36, 1) 98%, rgba(33, 21, 32, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(253, 253, 253, 0) 1%, rgba(37, 26, 36, 1) 98%, rgba(33, 21, 32, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(253, 253, 253, 0) 1%, rgba(37, 26, 36, 1) 98%, rgba(33, 21, 32, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#211520', GradientType=1);
  /* IE6-9 */
}

<div class="container-fluid calnav_head">
  <div class="row text-center">
    <div class="col-md-3">
      <a href="#">
        <div class="calnav"><i class="fa fa-angle-double-left pull-left" aria-hidden="true"></i> Previous</div>
      </a>
    </div>
    <div class="col-md-6 calnav_head_title">
      <h1>July - 2017</h1>
    </div>
    <div class="col-md-3">
      <a href="#">
        <div class="calnav">Next <i class="fa fa-angle-double-right pull-right" aria-hidden="true"></i></div>
      </a>
    </div>
  </div>
</div>

詹姆士

您是否有任何理由不想将格式应用于链接并丢失包含的 div？

例子：

a.calnav {
    display:block; // or display:inline-block depending on your need
    font-size: 1.3em;
    color: #000;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
    background: white;
}

然后只需为每个 ( a.calnav.prev {})添加一个上一个/下一个类名？

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。