Steer clear of using mouse-over effects and focus highlighting in CSS and jQuery

Question

Steer clear of using mouse-over effects and focus highlighting in CSS and jQuery

I am looking to implement a feature where only keyboard navigation triggers row highlighting in a table, rather than mouseover events.

When using the tab key to move through the rows, I want the highlight effect to be activated.

<table>
   <tr><td>Row1</td></tr>
   <tr><td>Row1</td></tr>
   <tr><td>Row1</td></tr>
</table>

To achieve this, I have defined the following CSS rule for highlighting:

table tr:hover{
  background: yellow
}

You can view the code and functionality on JS Fiddle by clicking here.

The goal is to disable row highlighting on mouseover interactions but enable it when using the TAB key for navigation.

javascript jquery html css

Answer 1

Answer №1

Check out this simple HTML/CSS demo. By using the pointer-events: none property and styling the row on :focus instead of :hover, you can achieve the desired effect.

Take a look at this fiddle showcasing two different examples:

The first example allows clicking or tabbing through the options.
The second example only permits tabbing through them.

Click here for the Fiddle

Answer 2

Check out this simple HTML/CSS demo. By using the pointer-events: none property and styling the row on :focus instead of :hover, you can achieve the desired effect.

Take a look at this fiddle showcasing two different examples:

The first example allows clicking or tabbing through the options.
The second example only permits tabbing through them.

Click here for the Fiddle

Answer 3

Answer №2

To achieve the desired result, you can utilize the :focus pseudo-class along with setting tabindex attributes on your rows. For a demonstration, check out this Fiddle: https://jsfiddle.net/3zsc7nok/

UPDATE:

If you want to prevent highlighting when clicking on rows using the mouse, you can employ a simple jQuery script like the one below:

$('tr').on("mousedown", function(event) {
  event.preventDefault();
});

Check out the revised Fiddle here for an updated example: https://jsfiddle.net/s00xgt2s/

Answer 4

To achieve the desired result, you can utilize the :focus pseudo-class along with setting tabindex attributes on your rows. For a demonstration, check out this Fiddle: https://jsfiddle.net/3zsc7nok/

UPDATE:

If you want to prevent highlighting when clicking on rows using the mouse, you can employ a simple jQuery script like the one below:

$('tr').on("mousedown", function(event) {
  event.preventDefault();
});

Check out the revised Fiddle here for an updated example: https://jsfiddle.net/s00xgt2s/

Answer 5

Answer №3

Have you considered using jQuery instead of plain CSS for this task? You could try something like the following code snippet:

$("tr").keydown(function (e) {    
  if (e.which == 9) {     
    $(this).css("background", "yellow");
    e.preventDefault();
  }
});

I'm curious to hear if this solution works for you.

Answer 6

Have you considered using jQuery instead of plain CSS for this task? You could try something like the following code snippet:

$("tr").keydown(function (e) {    
  if (e.which == 9) {     
    $(this).css("background", "yellow");
    e.preventDefault();
  }
});

I'm curious to hear if this solution works for you.

Steer clear of using mouse-over effects and focus highlighting in CSS and jQuery

Answer №1

Answer №2

Answer №3

Similar questions

The sidebar should remain fixed on top when viewed on mobile devices, but not when viewed on desktop

Tips for creating a consistent vertical divider height between columns in bootstrap

jQuery address plugin does not function properly when content is being replaced

Troubleshooting lpush errors in Node.js with Redis

Placing two items at opposite extremes of a full-width display with a header

Do discrepancies exist between ' and " symbols?

Using AngularJS to bind a dynamically created form built in JavaScript

Verifying input fields prior to database entry

CSS can create a semi-circle shape using borders and outlines

Using Selenium to choose an element based on the text of its sibling element

Any suggestions on how to customize the tawk.to positioning within a Next Js script?

Creating a Node.js application using Express requires careful consideration of file structure and communication methods

Ways to solve the padding issue in Bootstrap 5

Unable to retrieve data from input field using ajax

Is it possible for a form submission through javascript to disrupt existing axios requests?

Tips on properly styling HTML using the BEM naming convention

Leverage ng-value attribute when working with radio buttons in AngularJS

What mechanisms does Vue employ to halt the browser from sending a server request when the URL in the address bar is modified?

How can we effectively map Typescript Enums using their keys without relying on a Map?

Is the selection of values from a dropdown list dependent on the type of input method used?