javascript - 在 html 中扩展缩写

Question

我想创建扩展缩写，例如 this网站。到目前为止，我有以下代码:

<abbr title="test" aria-expanded="true" class="active">
  1790
  <span></span>
</abbr>

如果有人能进一步帮助我，我将不胜感激。

Answer 1

我将把它分成两部分:HTML 和 CSS 样式。

HTML

该缩写可以在没有任何 JS/CSS 的情况下正常工作。您可以通过使用上面的代码创建一个非常简单的 html 文件来看到这一点。您可以从 Mozilla 上的示例中看到这一点(链接:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)

<abbr title="Hypertext Markup language">HTML</abbr>

CSS 样式

适用于您提供的示例的 CSS 是缩写旁边的箭头按钮和悬停时光标的样式。这个样式在 css 中。请注意，下面的 CSS 要求缩写位于 class="publication-body"的元素内，但您可以根据需要删除“.publication-body”定义。

这部分改变了悬停颜色和指针:

.publication-body abbr {
    border: none;
    cursor: pointer
}

.publication-body abbr:hover {
    color: #df5b57
}

这部分使圆圈和向下箭头在缩写之后的范围内:

.publication-body abbr span {
    width: 18px;
    height: 18px;
    background-color: #eae9e9;
    border-radius: 9px;
    position: relative;
    top: 4px;
    display: inline-block;
    margin-left: 6px
}

.publication-body abbr span:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #df5b57 transparent
}

.publication-body abbr.active span:after {
    top: 5px;
    border-width: 0px 6px 6px;
    border-color: #df5b57 transparent
}