Question

我想在Previous左边的较暗边和Next右边的较暗边做渐变效果。以下是我到目前为止所尝试的内容：https://jsfiddle.net/jn87640p/4/

我错过了什么？

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

Answer 1

您是否有任何理由不想将格式应用于链接并丢失包含的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 {}）添加上一个/下一个班级名称？

Answer 2

首先，您的HTML包含错误。您不应将<div>放在<a>内。无论如何，问题是因为具有calnav类的每个元素都是其父级的唯一子元素。您需要将该类应用于更高级别。

你的CSS也有一些小错误。这是修复：

＆＃13;

.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(left, rgba(33, 21, 32, 1) 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  dfilter: 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(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%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  dfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#211520', GradientType=1);
  /* IE6-9 */
}

＆＃13;

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

＆＃13;

first-child / last-child不同的悬停样式

2 个答案: