Question

以下HMTL和CSS代码生成一个日期选择器。 fa-angle-left和fa-angle-right是可点击的元素。悬停时，fa-angle-left元素无法点击，因为datepicker-date的填充位于fa-angle-left之上。我发现了几个主题，但我似乎无法解决问题：

HTML：

<div class="datepiker-container">
  <span class="fa fa-angle-left fa-3x datepicker" {{action "dateBack"}}></span>
  <div class="datepicker-date">
    <h4 class="datepicker">{{dayOfWeek}}</h4>
    <h2 class="datepicker">{{monthDay}}</h2>
    <h5 class="datepicker">{{month}}  <span style:"font-weight:800">{{year}}</span></h5>
  </div>
  <span class="fa fa-angle-right fa-3x datepicker" {{action "dateForward"}}></span>
</div>

CSS：

div.datepiker-container {
    position: relative;
    display: inline-block;
    width: 145px !important;
    padding: 20px 20px 20px 20px !important;
}

div.datepicker-date {
    position: relative;
    display: inline-block;
    width: 87px !important;
    padding: 0px 0px 0px 30px !important;
}


h2.datepicker {
  margin: -5px 0px -5px 0px !important;
  padding: 0 !important;
  font-size: 250%;
  font-weight: 100;
  letter-spacing: 5px;
  color: white;
  text-align: center;
  width: 45px;
}


h4.datepicker {
  margin: 0px 0px 0px 0px !important;
  padding: 0 !important;
  font-size: 100%;
  font-weight: 400;
  letter-spacing: 9px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  width: 45px;
}


h5.datepicker {
  margin: 0px 0px 0px 0px !important;
  padding: 0 !important;
  font-size: 75%;
  font-weight: 400;
  letter-spacing: 1px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  width: 45px;
}


span.datepicker {
  padding: 8px 0px 7px !important;
  color: rgba(255,255,255,0.5);
  position:absolute;
}

span.datepicker:hover {
  padding: 8px 0px 7px !important;
  color: rgba(255,255,255,1);
  position:absolute;
}

问题：使fa-angle-left可点击的正确方法是什么？

由于

Answer 1

快速修复将图标置于顶部：

span.datepicker {
  padding: 8px 0px 7px !important;
  color: rgba(255,255,255,0.5);
  position:absolute;
  z-index: 1000; /* add this rule */
}

另一种方法是在中间部分margin上使用padding：

div.datepicker-date {
  position: relative;
  display: inline-block;
  width: 87px !important;
  margin: 0px 0px 0px 30px !important; /* use margin over padding */
}

顺便说一下，你的HTML无效：

<span style:"font-weight:800">
           ^
            this should be an equal sign (=)

由于css格式化，HTML字体无法点击

1 个答案: