jquery - 如何让这个demo中的下划线效果继续使用CSS？

Question

我是 CSS 的初学者，我想知道如何保持下划线效果(当悬停在 this demo 中的链接上时)永久。我可以使用 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

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

JQuery

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

额外的 CSS

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

Fiddle