What is the method to maintain the underline effect in the demo with CSS?

Question

What is the method to maintain the underline effect in the demo with CSS?

As a CSS novice, I am curious to find out how to maintain the underline effect on links (as seen in this demo) without it disappearing when the mouse focus is removed. While I am aware that jQuery or javascript can be used to keep the focus on an element, I specifically want the underline to remain visible even after the cursor has moved away. Your help is greatly appreciated.

    <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>

jquery html css

Answer 1

Answer №1

If you want to trigger a hover event using JQuery when hovering over your anchor tags in order to apply a specific class, you can use the following code:

JQuery

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

Additional CSS

.highlight{border-bottom:3px solid red;}

Code Demo

Answer 2

If you want to trigger a hover event using JQuery when hovering over your anchor tags in order to apply a specific class, you can use the following code:

JQuery

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

Additional CSS

.highlight{border-bottom:3px solid red;}

Code Demo

Answer 3

Answer №2

To implement JQuery, try using this code:

 $("#focus-this").on({

 mouseenter: function () {
     $(this).focus(); },
 mouseleave: function () {
     $(this).blur(); }
});

You can find a demo here.

Answer 4

To implement JQuery, try using this code:

 $("#focus-this").on({

 mouseenter: function () {
     $(this).focus(); },
 mouseleave: function () {
     $(this).blur(); }
});

You can find a demo here.

What is the method to maintain the underline effect in the demo with CSS?

Answer №1

Answer №2

Similar questions

Exploring the Document Object Model to locate the adjacent sibling of a parent element

How can I use jQuery to show an HTML dropdown menu populated from PHP?

Mixing two elements for a continuous animation without the use of JavaScript

Styling a submission button with HTML and CSS

What is the best way to bring in an external webpage using Jquery and Custom variables into an Iframe?

determining the amount by which a div extends beyond the window's height

JavaScript Drag-and-Drop Statement Issues

How can I utilize the submitHandler in Form Validation to trigger the sending of 2 AJAX requests

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

Angular4 validation for the full name input field is not functioning correctly as anticipated

Displaying a certain div when clicked within a loop using Vue.js and Laravel

In Angular, what is the best way to change the format of the timestamp '2019-02-22T12:11:00Z' to 'DD/MM/YYYY HH:MM:SS'?

Is your 100% height not beginning at the top of the page?

When using the "top" property in position-absolute, the child element may exceed the boundaries of the parent element

The show/hide jquery function is functioning perfectly on desktop devices, but issues arise on mobile devices where the divs overlap each other when using the show() method

Seeking assistance with a peculiar JSON parsing challenge

Optimizing FileReader result for seamless compatibility on all browsers and devices when loading into an HTML5 video player

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

Adding material-ui library to a stylesheet

Incorporate a redirect function following an alert using jQuery, AJAX,