Question

我的页脚上有一个箭头（标签），其中包括：after和：在CSS自定义之前，我无法使其正常工作。它只能在某些部分点击，而不是整个箭头，我100％肯定是因为：之后和：选择器之前。

＆＃13;

body {
  margin-top: 40px;
}
footer {
  background-color: #239bd2;
  position: relative;
}
footer:before,
footer:after,
footer > .arrow {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-bottom-color: #239bd2;
}
footer:after {
  margin-left: -8px;
  border-width: 8px;
}
footer > .arrow {
  margin-left: -11px;
  border-width: 11px;
  border-bottom-color: #fff;
}

＆＃13;

<footer>
  <a href="#" class="arrow"></a>
  <div class="wrap">
    <ul class="nav navbar-nav">
      <li><a href="#">Mentions légales</a>
      </li>
      <li><a href="#">CGV</a>
      </li>
      <li><a href="#">Livraison</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Engagement Qualité</a>
      </li>
    </ul>
  </div>
</footer>

＆＃13;

我可以通过任何方式更改我的代码以使点击效果正确地适用于标签吗？

可以找到实时网站here。

Answer 1

我不确定你拥有的是最好的设置，但是，:before和:after是“点击方式”。

尝试：

footer:before, footer:after{
  pointer-events: none;
}

Answer 2

您是否尝试过将:before和:after伪元素放在.arrow锚标记上？

现在他们已经在页脚上，并且正在覆盖锚标签的一部分。

编辑：我已经重新设计了你的风格。

＆＃13;

body {
  margin-top: 40px;
}
footer {
  background-color: #239bd2;
  position: relative;
}
footer > .arrow:before, footer > .arrow:after, footer > .arrow {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-bottom-color: #239bd2;
}

footer > .arrow:before {
  margin-left: -11px;
  border-width: 11px;
  top: -2px;
  border-bottom-color: #FFF;
}

footer > .arrow:after {
  margin-left: -8px;
  border-width: 8px;
  top: 4px;
}

＆＃13;

<footer>
  <a href="#" class="arrow"></a>
  <div class="wrap">
    <ul class="nav navbar-nav">
      <li><a href="#">Mentions légales</a>
      </li>
      <li><a href="#">CGV</a>
      </li>
      <li><a href="#">Livraison</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Engagement Qualité</a>
      </li>
    </ul>
  </div>
</footer>

＆＃13;

Answer 3

您可以尝试此解决方案。

将箭头包裹在span标记内，然后将锚标记（链接）移到包装器外部。

<强> HTML

<a href="#">
  <!-- your :before arrow applies here -->
  <div id="arrow_wrap">
      <span class="arrow"></span>
  </div>
  <!-- your :after arrow here -->
</a>

<强> CSS

<style type="text/css">
    #arrow_wrap:before,
    #arrow_wrap:after,
    #arrow_wrap > .arrow {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -20px;
        border: 20px solid transparent;
        border-bottom-color: #239bd2;
    }
    #arrow_wrap:after {
        margin-left: -8px;
        border-width: 8px;
    }
    #arrow_wrap > .arrow {
        margin-left: -11px;
        border-width: 11px;
        border-bottom-color: #fff;
    }
</style>

这里有一个工作示例http://jsfiddle.net/owtck808/

页脚上的箭头链接不起作用

3 个答案: