jquery - 如何在这个演示中保持下划线效果保持使用 CSS？

Question

我是 CSS 的初学者，我想知道如何保持下划线效果（在此演示中悬停在链接上时）永久。我可以使用 jQuery 或 javascript 将焦点放在元素上，但我希望即使在鼠标焦点转移后下划线也能保留。谢谢你。

    <section class="blue-green">
    <nav id="cl-effect-4" class="cl-effect-4">
        <a id="focus-this" href="index.html">+ Create New</a>
        <a href="launch_approved.html">Launch Approved Campaigns</a>
        <a href="pending.html">Pending Approval</a>
        <a href="record.html">Your Campaign Record</a>
    </nav>
    </section>

Answer 1

当您将鼠标悬停在将添加类的锚标记上时，您可以使用 JQuery 触发悬停事件：

jQuery

$("a").hover(
  function () {
    $(this).addClass('focus-this');
  }
);

附加 CSS

.focus-this{border-bottom:5px solid white;}

小提琴

Answer 2

像这样做你的JQuery，

 $("#focus-this").hover(

 function () {
     $(this).focus(); }, function () {
     $(this).hover(); });

这是一个适合你的小提琴！