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

【问题标题】：How to target a <font> tag in an <a> tag and use hover effect?如何在 <a> 标签中定位 <font> 标签并使用悬停效果？
【发布时间】：2018-08-07 14:12:06
【问题描述】：

我正在尝试重新设计我的 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>

【问题讨论】：

你没有。 <font> 已经过时多年了。 html.spec.whatwg.org/dev/obsolete.html#obsolete
这正是我的 Wordpress 主题的结构方式。我不确定如何更改它，并且使用“检查”工具，定位它是我可以获得我想要的效果的唯一方法，但我只能使用检查在 HTML 中内联这样做。我只是不知道如何在检查之外做到这一点。
创建该父主题的子主题，然后从模板中编辑该标记。或者，只需使用 css 设置标签的样式。

标签： html css wordpress

【解决方案1】：

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

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

【讨论】：

这可能是一个非常愚蠢的问题，但是如何在我的主题上编辑 HTML 以使用 span 标记？
它不再被弃用。它已经过时了！ html.spec.whatwg.org/dev/obsolete.html#obsolete
对 WordPress 不太熟悉。虽然 font 元素已过时，但它在技术上与您关于 CSS 悬停问题的症结无关。定位 .menu-link:hover font 现在应该是一样的。

【解决方案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>

【讨论】：

我喜欢这种方法，但它仍然没有正确定位。不幸的是，我什么都没发生。
也许是这样？ <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> a{text-decoration:none;} a:hover{text-decoration:underline;} </style>

【解决方案3】：

a font:hover{}

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

【讨论】：

【解决方案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 中是 depreciated / not supported。

【讨论】：