Tips for improving the user experience of :hover on mobile devices

Currently, I am utilizing SCSS to create a dropdown menu. Below is a snippet of the functionality:

li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: $menuBG;
    color: $menuColor;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
        background: $hoverBG;
        color: $hoverColor;
    }

My goal is to maintain this behavior while ensuring accessibility for non-mouse users such as those with accessibility tools and mobile devices. While jQuery could be utilized, it is not the preferred solution.

cssuser-interfacemobilesassuser-experience

Answer №1

My suggestion would be to avoid using dropdown menus for touch screen devices, as they may not provide the best user experience. However, if you still want to give it a try, here are a few possible solutions:

  • Utilize JavaScript to open the menu on touchstart and close it when there is a touchstart event outside of the menu area.
  • Combine both :hover and :focus in the CSS to allow the menu to open upon click.
  • For a more complex CSS-only approach that is more reliable but challenging, consider using anchor elements with ::after pseudo-elements along with the :active and + selectors.

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

What is the best way to eliminate a CSS style from a div?

I have implemented jQuery Autosize to automatically adjust the height of textarea elements. It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value. I am unsure of ...

javascriptjquerycssreplace

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

Utilize CSS to conceal the direct ancestor of a specified element

Is it achievable using just CSS to conceal a parent element when a child element lacks a particular class? <!-- hide this --> <div class="parent"> <p class="badChild" /> </div> <!-- do not hide this --> <div class="pare ...

css

Ways to customize the default font in themes by using locally stored fonts

Currently, I am utilizing Quarto for the creation of a website and attempting to modify the default fonts within a specific theme. My ultimate objective is to incorporate local Google fonts rather than relying on the Google API. In my _quarto.yml file, it ...

cssquartogoogle-fonts

Talwind Flexbox Grid Design

Currently, I am exploring the world of website layout creation using Tailwind Flexbox Grids as I believe it can add significant value. However, I have encountered some queries: How does one go about constructing a layout like this? Referencing this speci ...

htmlcssvue.jstailwind-css

Steps for making a CSS hover box with two sections

Recently, I came across a helpful tip on Stack Overflow about creating a box when hovering over text using pure CSS. It was quite interesting to implement. I decided to experiment with the cursor position and placement as well. span{ background:#F8F8 ...

htmlcss

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

I have a set of items like this: I am trying to replicate the functionality of a file explorer in terms of item selection. To clarify, I aim to create a feature where hovering over an item and left-clicking it would generate a virtual rectangle to select ...

javascriptjquerycss

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionali ...

javascriptjquerycssreactjs

Aligning the email form to the center with the text-align center property:

I'm in the process of creating an app landing page using the Bootstrap framework (Bootstrap 4 alpha). I have used text-align:center in the jumbotron id to center everything, but the email form is not aligning properly. Is there a way to center align ...

htmlcssflexboxtwitter-bootstrap-4

Is it possible to create a grid by arranging each statement with a specific format?

After fetching and parsing some data, I have utilized the 'each' function to display it: $.ajax({ url : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('htt ...

jqueryhtmlcss

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required. Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/r ...

htmlcssresponsive-design

How can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

javascripthtmlcss

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss

Tips for clearing floated images when the sidebar is also floated

Can someone assist me with this code snippet? I am trying to figure out a way to clear the nearest floated block. It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div. Here is the ...

htmlcsscss-float

What causes a new stacking context to be formed when using position: relative without z-index?

After reading this informative piece: When two elements share the same stack level, their layering is determined by their order in the source code. Elements stacked successively are placed on top of those that came before them. And referencing this ar ...

css

Main-container div in Bootstrap CSS sliding beneath the side navigation bar

I recently acquired a Bootstrap 4 theme and have been modifying some files to make it compatible with Flask. However, I'm facing an issue where the "main-container" div falls below the nav bar when I resize the page to full desktop browser size. In th ...

htmlcssbootstrap-4

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

javascriptjqueryhtmlcss

Display the dropdown selection

I am trying to customize my dropdown menu so that when I hover over the main menu item (Sample Page), only the About submenu is displayed, not all of the dropdown menus. li.menu-item.dropdown .dropdown-menu { position: absolute; top: 70px; visibil ...

jqueryhtmlcss

Transfer or duplicate an SVG image from the bottom div to the top div

Is there a way to move a div from the chart_div to the movehere div? I've tried duplicating it below the current svg, but I'm having trouble targeting just the header row ('g' element) specifically. Here is the HTML: <script type= ...

javascriptjqueryhtmlcsssvg

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

javascriptcssreactjs