如何让一个栏出现在链接下方？答案

【问题标题】：How to get a bar to appear below a link?如何让一个栏出现在链接下方？
【发布时间】：2021-02-16 10:20:36
【问题描述】：

当用户将鼠标悬停在链接上时，我试图在链接下方显示一个水平条。

let galleryAnchor = document.querySelector('#gallery-anchor')
let galleryAnchorBar = document.querySelector('#gallery-anchor-bar')

console.log('galleryAnchorBar.style.left = ' + galleryAnchorBar.style.left)
console.log('galleryAnchorBar.style.top = ' + galleryAnchorBar.style.top)

galleryAnchorBar.style.left = galleryAnchor.style.left
galleryAnchorBar.style.top = parseInt(galleryAnchor.style.bottom, 10) + 2 + 'px'

console.log('galleryAnchorBar.style.left = ' + galleryAnchorBar.style.left)
console.log('galleryAnchorBar.style.top = ' + galleryAnchorBar.style.top)

galleryAnchor.addEventListener('mouseenter', () => {
    galleryAnchorBar.style.width = galleryAnchor.style.width
})

galleryAnchor.addEventListener('mouseleave', () => {
    galleryAnchorBar.style.width = 0
})

#gallery-anchor-bar {
    position: fixed;
    width: 0px;
    height: 2px;
    background: linear-gradient(to right, #FF9966, #FF6565);
    border-radius: 1px;
    transition: all 500ms;
}

<div id="nav-anchor-grid">
    <a id="gallery-anchor" href="gallery.html">Gallery</a>
    <a id="organizations-anchor" href="organizations.html">Organizations</a>
    <a id="about-anchor" href="about-me.html">About Me</a>
</div>
<div id="gallery-anchor-bar"></div>

使用此代码，当我将鼠标悬停在链接上时不会发生任何事情。相反，如果我添加left: 500px;（或任何其他值）、top: 30px（或任何其他值）并将width: 500px（或任何其他值）设置为我的 CSS，则该栏会出现在页面加载时。当我将鼠标悬停在图库链接上，然后将光标移动到其他地方时，它就会消失。当我再次将鼠标悬停在链接上时，它会扩展为 CSS 中设置的宽度（不是我在 JavaScript 中指定的锚点宽度）。我无法弄清楚发生了什么。 console.log() 语句只打印没有我指定的值的硬编码字符串。最让我惊讶的是，当 mouseenter 上的 eventListener 的代码运行时，栏会扩展到 CSS 中指定的宽度，而不是锚点的宽度。

修改后的 CSS 的 sn-p：

let galleryAnchor = document.querySelector('#gallery-anchor')
let galleryAnchorBar = document.querySelector('#gallery-anchor-bar')

console.log('galleryAnchorBar.style.left = ' + galleryAnchorBar.style.left)
console.log('galleryAnchorBar.style.top = ' + galleryAnchorBar.style.top)

galleryAnchorBar.style.left = galleryAnchor.style.left
galleryAnchorBar.style.top = parseInt(galleryAnchor.style.bottom, 10) + 2 + 'px'

console.log('galleryAnchorBar.style.left = ' + galleryAnchorBar.style.left)
console.log('galleryAnchorBar.style.top = ' + galleryAnchorBar.style.top)

galleryAnchor.addEventListener('mouseenter', () => {
    galleryAnchorBar.style.width = galleryAnchor.style.width
})

galleryAnchor.addEventListener('mouseleave', () => {
    galleryAnchorBar.style.width = 0
})

#gallery-anchor-bar {
    position: fixed;
    left: 500px;
    top: 30px;
    width: 500px;
    height: 2px;
    background: linear-gradient(to right, #FF9966, #FF6565);
    border-radius: 1px;
    transition: all 500ms;
}

<div id="nav-anchor-grid">
    <a id="gallery-anchor" href="gallery.html">Gallery</a>
    <a id="organizations-anchor" href="organizations.html">Organizations</a>
    <a id="about-anchor" href="about-me.html">About Me</a>
</div>
<div id="gallery-anchor-bar"></div>

【问题讨论】：

你为什么要使用 JavaScript 来做 CSS 可以用一个简单的:hover 选择器做的事情？
尝试使用 ::after 伪元素而不是单独的 div。基本上，在悬停时，转换::after 的宽度。试试这个：stackoverflow.com/questions/26726436/…
#nav-anchor-grid a:hover - 在悬停时应用 css
@GabrielLupu 谢谢。我听从了您的建议，使用 ::after 和 :hover 是比我尝试的更简单的解决方案。

标签： javascript html css

【解决方案1】：

链接的渐进下划线 - 仅 CSS 解决方案

您可以通过在类.link::after 上将值设置为bottom: -2px; 来更改线条粗细

.link {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.link::after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0px;
    bottom: -2px;
    left: 0px;
    width: 0%;
    background: linear-gradient(to right, #FF9966, #FF6565);
    transition: width 1s;   
}

.link:hover::after {
    content: '';
    width: 100%;
}

<div>
    <a class="link" href="gallery.html">Gallery</a>
    <a class="link" href="organizations.html">Organizations</a>
    <a class="link" href="about-me.html">About Me</a>
</div>

【讨论】：

谢谢。您的解决方案是正确的（尽管我没有遵循它），除了您应该将 border-radius: 1px; 添加到 ::after 伪元素。

【解决方案2】：

简单的下划线不添加其他<div>：

a{
  text-decoration: none;
}

a:hover{
  /*text-decoration: underline; deafult behaviour*/
  border-bottom: 2px solid red; /*with your style*/
}

<div id="nav-anchor-grid">
    <a id="gallery-anchor" href="gallery.html">Gallery</a>
    <a id="organizations-anchor" href="organizations.html">Organizations</a>
    <a id="about-anchor" href="about-me.html">About Me</a>
</div>

或者解决方案全部在 html 部分

<div id="nav-anchor-grid">
    <a id="gallery-anchor" href="gallery.html"
    style="text-decoration:none" onmouseover="style='text-decoration:underline'" onmouseout="style='text-decoration:none'"
    >Gallery</a>
    <a id="organizations-anchor" href="organizations.html"
    style="text-decoration:none" onmouseover="style='text-decoration:underline'" onmouseout="style='text-decoration:none'">Organizations</a>
    <a id="about-anchor" href="about-me.html"
    style="text-decoration:none" onmouseover="style='text-decoration:underline'" onmouseout="style='text-decoration:none'">About Me</a>
</div>

【讨论】：

【解决方案3】：

#nav-anchor-grid a:hover {   
    border-bottom: 2px solid red;
}

<div id="nav-anchor-grid">
    <a id="gallery-anchor" href="gallery.html">Gallery</a>
    <a id="organizations-anchor" href="organizations.html">Organizations</a>
    <a id="about-anchor" href="about-me.html">About Me</a>
</div>
<div id="gallery-anchor-bar"></div>

【讨论】：