由于 css 格式，HTML 字体不可点击

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 (=)