How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click.

In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a computer.

Interestingly, on iOS devices, the click functionality not only triggers but also activates the :hover pseudo-class, revealing the extra info as intended. This unexpected behavior is actually quite ideal.

However, simply having a :hover pseudo-class in the CSS doesn't guarantee that a click will reveal it. So, what guidelines does iOS follow in applying or omitting the :hover state?

I prefer not to conceal functions under hovers and resort to writing touch-specific JavaScript just to make them operational. It appears that iOS is already handling some of this work for me. I am curious how to utilize this functionality intentionally rather than stumbling upon it accidentally!

javascriptioscsscss-selectorspseudo-class

Answer №1

It's common knowledge that iOS does not natively support the :hover pseudo-class due to its touch-based interface. While it may simulate mouse events in certain cases for compatibility, this method is not entirely reliable in replicating or activating an element's :hover state since finger interaction differs from using a traditional mouse pointer. As stated in this technical note:

Safari on iPhone OS users engage with web content directly via touch gestures, and the absence of cursor hover poses challenges for hover states implementation. Unlike a mouse pointer that hovers over elements, a finger on a Multi-Touch screen cannot achieve the same effect. To address this limitation, Safari emulates mouse events on iOS, which can impact elements reliant solely on mousemove, mouseover, mouseout, or CSS pseudo-class :hover behavior when accessed on touch-screen devices like iPad or iPhone.

While CSS documentation partially covers mouse event behaviors corresponding to UI states, there is limited information available. Further insights can be found here:

The following web technologies face restrictions on iOS:

  • ...

  • Mouse-over events

    In iOS, users do not have the ability to perform “mouse-over” actions on non-clickable elements. A clickable element must trigger a mouseover event as outlined in “One-Finger Events.”

  • Hover styles

    Given that a mouseover event occurs prior to a mousedown event, hover styles will only display if a user taps and holds a clickable element featuring a hover style. Refer to “Handling Events” for a comprehensive list of events initiated by gestures on iOS.

This indicates that the use of :hover is restricted to interactive elements. Clickable events are elucidated further here:

A clickable element encompasses links, form elements, image map areas, or any other element equipped with mousemove, mousedown, mouseup, or onclick handlers.

Therefore, for a consistent and dependable user experience on iOS, focusing on touch-centric design is recommended given the platform’s inherent touch functionality.

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

The transition from ExtJS 4 to ExtJS 5: A comprehensive guide

We're in the process of transitioning a web application from ExtJS 4 to ExtJS 5. Upon testing the index.html, we encountered an error message (displayed in the Firefox-FireBug-console): NetworkError: 404 Not Found - http://localhost:8080/ext/build/e ...

javascriptextjsweb-applicationsframeworks

Scroll automatically to the following div after a brief break

On my website, the title of each page fills the entire screen before the content appears when you scroll down. I am interested in adding a smooth automatic scroll feature that will transition to the next section after about half a second on the initial "ti ...

javascriptjqueryhtmlcss

Having issues with changing the backgroundColor of a UITableViewCell

Currently, I am adjusting the backgroundColor of my UITableViewCell using the following code snippet: cell.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:@"background.png"]]; Although the cell appears visual ...

iosuitableviewuicolor

Utilizing local storage, store and access user's preferred layout options through a click function

Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their ...

javascriptjqueryhtmlcsslocal-storage

The element "Footer" cannot be found in the file path "./components/footer/Footer"

After attempting to run the npm start command, I encountered the following error. In my code, I am trying to import the file /components/footer/Footer.js into the file /src/index.js //ERROR: Failed to compile. In Register.js located in ./src/components/r ...

javascriptnode.jsreactjsnpm

Arrange array of objects with unspecified and non-existent values

Is there a way to sort an array of objects in JavaScript that contains null and undefined values? The goal is to display items with a "jobTitle" property first, sorted by rating, followed by items without a "jobTitle" also sorted by rating. Sample Data: d ...

javascriptarrayssorting

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

phpjavascriptjqueryhtmlsearch

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

javascriptphpajax

Assigning a value to a variable from a method in Vue: a step-by-step guide

I'm having trouble assigning values from a method to variables in HTML. Here's what I have in my code: <b-card-text>X position {{xpos}}</b-card-text> <b-card-text>Y position {{ypos}}</b-card-text> I would like to assign v ...

javascriptvue.js

What is the connection between tsconfig.json and typings.json files?

I recently acquired a .NET MVC sample application that came with Angular2-final. Within the project, I noticed a typings.json file at the root and a tsconfig.json file in the ng2 app directory. What is the connection between these two files? Is this the mo ...

javascript.nettypescripttypescript-typingstsconfig

indicating the vertical size of a paragraph

Is there a way to set the specific height for the <p> tag? ...

htmlcss

Storing information using ajax and json technologies

I've inherited a project where I need to work on saving data to the database using an input. The function responsible for this (SaveData) is not functioning properly. Since I'm not very familiar with ajax and json, can someone please help me iden ...

javascriptc#jqueryajaxjson

Navigating array usage in Selenium IDE

I am trying to extract emails from a webpage using Selenium for future testing. I need to compare these emails with ones displayed in a selection later on. I attempted to read the emails within a while-loop but struggled with handling arrays in IDE. Unfor ...

javascriptarraysseleniumselenium-ide

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved? For instance, ...

htmlcss

Manipulating the actual DOM in ReactJS to display a formatted number or string while preserving its original value

Hello, I am new to ReactJS and currently using it along with ReactDataGrid. I am trying to figure out how to change the real DOM value of a specific cell in the table. Here is the table I am working with: https://i.sstatic.net/CAcSH.png My goal is to cha ...

javascriptreactjsdomnpmreact-data-grid

Tips for enabling custom object properties in Chrome DevTools

In my typescript class, I am utilizing a Proxy to intercept and dispatch on get and set operations. The functionality is working smoothly and I have successfully enabled auto-completion in vscode for these properties. However, when I switch to the chrome d ...

javascriptgoogle-chrometypescript

"Enhance your website with the magic of jQuery magnific-popup

Is there a way to add an additional button to the jquery magnific-popup component that can close the dialog box? I am currently utilizing this component to insert descriptions for photos, so I need a submit button that will successfully add the descriptio ...

javascriptjqueryjquery-uijquery-dialog

Edit CSS attributes within Angular 2+ framework

When using jQuery, we have the ability to do the following: JQuery('.someStyle') .css({"background", "red"}) This allows us to directly change the CSS property in style. While working with Angular 2+, we can use [style.<property>] for ...

javascriptangularangular2-template

What is the proper way to include onMouseOver and onMouseEnter events in a reactjs project

Seeking assistance with implementing the onMouseOver event in React, but encountering issues. I have followed the correct procedures for using, calling, and setting State. Please review my code and provide guidance. import React from 'react'; c ...

javascriptreactjs

What could be causing the submit button to reactivate before all form fields have been completed?

I have implemented the code snippet below to validate each field in my contact form using bootstrap-validator and an additional check through Google reCAPTCHA. You can view and test the form here. The submit button is initially disabled with the following ...

javascriptjquerybootstrapvalidator