CSS dilemma: A snag with pointer-events and the a:focus attribute

Does anyone have experience troubleshooting issues with navbars? I could really use some help.

I am facing an issue with my navigation bar where I have different links that reveal an unordered list of sublinks upon clicking.

The CSS for my <ul> is set to opacity: 0, and in my stylesheet, I have the following code:

.tab ul {
  opacity: 0;
  pointer-events: none;
}

.tab a:focus + ul {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
}

(this section of the code seems to be causing the problem)

When I click on a link, the tab does expand, and the pointer events are set to `all` (I can tell because the color of the sublinks changes when hovered over). The problem arises when I click on a sublink - the focus on the original tab link is lost and it appears that the `pointer-events` property is set to `none` BEFORE executing the action of the sublink (a simple href="page.html").

I attempted removing the `:focus` pseudo-class to keep the tab constantly in focus, which allowed the sublinks to redirect me to the intended pages.

Additionally, I tried applying `pointer-events: all` to ul > li > a, but this did not solve the issue.

From my observations, it seems like the tab link loses focus and the pointer event is disabled before the sublink's action is triggered.

Does anyone know of a workaround to ensure the sublink's action is executed before losing focus?

In the unfolded tab with a hovered sublink (mouse cursor not visible in the screenshot):

https://i.sstatic.net/1HSNv.png

htmlcss

Answer №1

If I have grasped your meaning accurately, perhaps incorporating this solution could be beneficial:

.tab a + ul:hover {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all !important;
}

When the link loses focus, the submenu disappears, but you can retain the submenu by using ul:hover.

P.S. In reference to the website example you provided, appending this code at the end seems to be effective (I verified it using Web Inspector):

.menu-loisirs a + ul:hover, .menu-sports a + ul:hover {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: all !important;
}

Answer №2

When it comes to this type of interaction, the use of ":focus-within" is typically a good choice. If the "trigger" link and its child wrappers share the same parent wrapper, it's logical to apply logic to the state of that parent wrapper. To ensure keyboard accessibility in such a structure, you can utilize the following CSS:

.tab:not(:hover):not(:focus-within) a + ul {
  display: none; /* for conciseness, utilize accessible hiding in actual implementation */
}

/* not strictly required */
p[id]:not(:target) {
  display: none;
}

a[href]:empty:before {
  content: '🔗 ' attr(href);
}

p[id]:empty:before {
  content: '§ ' attr(id)
}
<div class="tab">
  <a href="#a"></a>
  <ul>
    <li>
      <a href="#a1"></a>
    </li>
    <li>
      <a href="#a2"></a>
    </li>
  </ul>
</div>
<div class="tab">
  <a href="#b"></a>
  <ul>
    <li>
      <a href="#b1"></a>
    </li>
    <li>
      <a href="#b2"></a>
    </li>
  </ul>
</div>
<p id="a"></p>
<p id="a1"></p>
<p id="a2"></p>
<p id="b"></p>
<p id="b1"></p>
<p id="b2"></p>

Before implementing this in a production environment, make sure to check browser support (not compatible with IE11 and older browsers) and consider consulting accessibility and screen reader support.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered: index.html:17 - An InvalidStateError was thrown when attempting to execute the 'send' function on the XMLHttpRequest object. The object's state must be OPENED in order to send the Ajax request

When attempting to run index.html on a local host with xampp, an error is encountered: index.html:17 Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.sendAjax @ index.html: ...

javascripthtmlajax

What is the best way to access the child DOM of a Vue element?

Is there a way to access the child DOM element of a Vue component? In the code snippet below, I am trying to retrieve the <input> element nested within the <div>. var vm = new Vue({ el: '#box', data: { pick: true, a: & ...

htmlvue.jsconsole

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

A webpage specified with 'charset=iso-8859-1' accompanied by <!DOCTYPE HTML> is triggering a cautionary alert

After running the W3C validator on an HTML document, I discovered that using the following meta tag: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> in conjunction with: <!DOCTYPE HTML> results in ...

htmlcharacter-encodingdoctypew3c-validation

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

jquerycssajaxappendslideup

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

javascripthtmlcss

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

javascriptangularjshtml

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

javascriptjqueryhtml

`Animate your divs with slide in and slide out effects using

Currently, I am in the process of replicating a website and facing some challenges. This site is my inspiration for the project. I have managed to create a sliding effect using CSS, making the div slide in and out from the same direction. However, I want ...

javascripthtmlcss

Having a challenge with aligning a form in a view, as neither bootstrap nor plain CSS seem to be helping with centering it correctly

What techniques can I use to center this form properly in both bootstrap and plain CSS? So far, I have been able to center some parts of it, but when I try to center others, they shrink and create a mess. When I use bootstrap to center the elements, they b ...

cssasp.nettwitter-bootstrapbootstrap-4

Steps to transfer text from one input field to another by clicking a button using JavaScript

Hello, I am new to Javascript so please forgive me if my question seems silly. I have been tasked with creating a form containing two input fields and a button. When the button is clicked, the text entered in the first field should move to the second field ...

javascripthtml

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image https://i.sstatic.net/UJEG8.png HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot ...

htmlcssbootstrap-4

Having trouble uploading multiple input files in a Flask and HTML form

I'm attempting to upload multiple files using HTML in my Flask application. Below is the HTML form I have been using: <form action="url", method="POST", enctype="multipart/form-data"> <font size="2"> File2: <input type= ...

pythonhtmlflaskread-data

Issue with Wordpress Submenu Items not Displaying

I've included sub menu items in my primary navigation, but they're not visible at all? I've examined the css and haven't found any code that would hide the sub menu. ul.art-hmenu { display: inline-block; vertical-align: midd ...

phpcsswordpress

What is the method for sending parameters to PHP from an HTML file using AJAX?

My protfolio.html file contains a table #gallery with different categories. I want to dynamically update the content of the #gallery based on the selected category using ajax. I have a php file that scans a specific folder for images related to the categor ...

javascriptphpjqueryhtmlajax

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

javascripthtmlruby-on-railsnode.jsexpress

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Restricting the number of characters allowed for text messages and keeping track of the count

I am attempting to implement a character limiter for an html textarea using JavaScript. Additionally, I want to include a total character counter. Unfortunately, the code I have written isn't functioning as expected. Can anyone identify where my mist ...

javascriptjqueryhtmlsms