时间戳

首页 > 解决方案 > 如何保持动画链接下划线效果但使整个区域可点击（没有 onclick 也没有额外的 div）

html - 如何保持动画链接下划线效果但使整个区域可点击（没有 onclick 也没有额外的 div）

问题描述

我正在使用一种技术来创建一个动画链接效果，其中下划线慢慢形成（我不记得我最初看到的技术是什么，但我是从我之前工作过的另一个应用程序中复制的）。

它在大多数情况下效果很好，特别是如果链接作为文本的一部分嵌入，但在这种情况下，我希望它成为标题导航的一部分。

因此，对于一个人来说，我希望链接可点击区域成为一个块，包括填充，而不仅仅是<a>通常的一段文本。

我试图在不改变 HTML 本身的情况下做到这一点，并且只通过 CSS 来做到这一点。

https://codepen.io/trajano/pen/mdyYpdv

.page-header {
  width: 1080px;
  height: 94px;
  display: flex;
  border-bottom: 1px solid red;
  align-items: center;

  $link-color: rgba(0, 0, 0, 0.6);
  $link-hover-color: cyan;
  $selected-link-background: rgb(39, 153, 137);
  $selected-link-color: white;

  &__logo {
    img {
      width: 94px;
      height: 94px;
    }
    margin-right: auto;
  }

  &__selector {
    margin-left: 1rem;
    padding: 1rem;
    position: relative;
    display: inline-block;
  }

  &__selector--dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;

      &:hover {
        background-color: #f1f1f1;
      }
    }
  }

  &__selector:hover {
    background: red;
  }

  &__selector--dropdown:hover {
    display: block;
  }

  &__selector:hover &__selector--dropdown {
    display: block;
  }

  .page-header-link {
    margin-left: 0.5rem;
    padding: 1rem;

    a {
      font-size: 14px;
      text-decoration: none;
      display: inline-block;
      position: relative;
      color: $link-color;

      &:after {
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        bottom: -4px;
        position: absolute;
        background-color: $link-color;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
      }
      &:hover:after {
        width: 100%;
        left: 0;
      }
    }
    &:hover {
      background-color: $link-hover-color;
    }
  }

  .page-header-link__selected {
    background-color: $selected-link-background;
    a {
      font-size: 14px;
      text-decoration: none;
      display: inline-block;
      position: relative;
      color: $selected-link-color;
      &:after {
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        bottom: -4px;
        position: absolute;
        background-color: $selected-link-color;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
      }
      &:hover:after {
        width: 100%;
        left: 0;
      }
    }
  }

  .page-header-selector {
    margin-left: 1rem;
    padding: 1rem;
    border: 1px solid black;
    display: inline-block;

    &__button {
      display: inline-block;
      min-width: 100%;
      min-height: 100%;
    }

    &__dropdown {
      display: none;
      position: absolute;
      z-index: 1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;

        &:hover {
          background-color: #f1f1f1;
        }
      }
    }

    &:hover {
      background: red;
      .page-header-selector__dropdown {
        display: block;
      }
    }
  }
}
  <div class="page-header">
    <div class="page-header__logo">
      <a href="#">
        LOGO
      </a>
    </div>
    <div class="page-header-link">
      <a href="#">2+2=5</a>
    </div>
    <div class="page-header-link">
      <a href="#">YOLO</a>
    </div>
    <div class="page-header-link">
      <a href="#">Foo Bar</a>
    </div>
    <div class="page-header-link page-header-link__selected">
      <a href="#">Linkx</a>
    </div>
    <div class="page-header__selector">
      <div class="page-header__selector--button">en</div>
      <div class="page-header__selector--dropdown">
        <a href="#">Francais</a>
        <a href="#">Pirate</a>
        <a href="#">Chef</a>
      </div>
    </div>
  </div>

这基本上与使用 onclick 但没有 href=#? 创建可点击链接相反。

标签： htmlcsscss-animations

解决方案

移动padding到并稍微a改变样式：:after

.page-header-link {
    margin-left: 0.5rem;

    a {
      font-size: 14px;
      text-decoration: none;
      display: block;
      position: relative;
      color: $link-color;
      padding: 1rem; /* <- */

      &:after {
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        bottom: calc(1rem -4px); /* <- */
        position: absolute;
        background-color: $link-color;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
      }
      &:hover:after {
        width: calc(100% - 2rem); /* <- */
        left: 1rem; /* <- */
      }
    }
    &:hover {
      background-color: $link-hover-color;
    }
  }

推荐阅读