如何定位标签<font> <a> 中的标签并使用悬停效果？

Question

我正在尝试重新设计Wordpress主题上的移动菜单的外观。我已经完成了大部分 css，但我希望当您将鼠标悬停在菜单上时出现一个border-bottom。我试图将其添加到<a>标签中，但它强调了整个div，而不仅仅是文本。使用检查工具，我看到我需要定位<a>标签中的<font>标签，但如何将悬停属性应用于它？

下面是一个基本示例，用于解释主题菜单的结构。

<div id="menu-wrap">
    <ul id ="menu">
        <li class="menu-item>
            <a class="menu-link" href="www.website.com/link">
                <font style> Link Name </font>
            </a>
        </li>
    </ul>
</div>

Answer 1

字体元素已弃用。在MDN的网站上查看更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

我建议使用 span 标签并定位跨度，例如 .menu-link:hover span .

Answer 2

您可以使用

：hover 创建悬停下划线效果

<div id="menu-wrap">
    <ul id ="menu">
        <li class="menu-item">
            <a class="menu-link" href="www.website.com/link">
                <font style> Link Name </font>
            </a>
        </li>
    </ul>
</div>
<style>
    .menu-link{text-decoration:none;}
    .menu-link:hover{text-decoration:underline;}
</style>

Answer 3

a font:hover{}

在这种情况下，如果 A 标签中只有字体标签，您可以使用上述格式或者特别是您可以使用的字体标签.menu-link font:hover{}

Answer 4

您在

menu-item类中缺少"，这可能会破坏边框的呈现。

对于悬停时的字体下边框，您可以这样做：

.menu-link font:hover {
    border-bottom: aqua solid ;
}
// Or 
a font:hover {
    border-bottom: aqua solid ;
}

<div id="menu-wrap">
    <ul id ="menu">
        <li class="menu-item">
            <a class="menu-link" href="www.website.com/link">
                <font style> Link Name </font>
            </a>
        </li>
    </ul>
</div>

此外，您不应该使用 font 标记，因为它在 HTML5 中已弃用/不受支持。