Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners accordingly. However, without mobile detection, I'm unsure how to achieve this and haven't had any luck with Google or Stack Overflow so far.

Maybe something similar to question #8981463

$(function() {
  var canHover = $(document).is(":hover");
});

I won't have the opportunity to test this on a mobile device until next week.

Any thoughts?

javascriptjquerycss

Answer №2

Unfortunately, there isn't a way to detect the CSS pseudo-class :hover using JavaScript since they are not part of the DOM.

However, you can still determine if a device has touch capabilities by checking for certain touch events. This is something that Modernizr can help with:

if ('ontouchstart' in document.documentElement) {
  document.documentElement.classList.add('touch');
} else {
  document.documentElement.classList.add('no-touch');
}

By adding classes to the <html> element based on touch capabilities, you can style elements differently in CSS:

.no-touch .element:hover {color: red;} // Mouse users
.touch .element {color: blue;} // Touch devices

Answer №3

Struggling to fall asleep, I may have finally resolved my issue, at least in the context of my own circumstances. Utilizing sprites on these buttons and already implementing sprite position checks elsewhere, it dawned on me that I could enhance the functionality by checking the sprite position when the button is clicked before firing. If the sprite hasn't been re-positioned for the specific button upon click, it indicates that the device may not support hover interaction. Therefore, I can consider the click as the initial step of a two-part activation process. Interestingly, I came across information today suggesting that certain mobile devices already interpret the first click as a hover action.

The logic behind my sprite positioning may need to be executed prior to triggering the button's click event:

if ($(elem).css('background-position').indexOf('76px') >= 0 ) {

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

Tips for accessing $parent of ng-repeat from ng-include

In my code, I have a nested ng-repeat structure with an ng-include inside the inner ng-repeat. I am trying to access the outer ng-repeat using $parent within the ng-include. Here is an example of what I am working on: index.html <div ng-repeat="popula ...

javascriptangularjsweb

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53. While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback functi ...

javascriptcanvaswebglthree.js

The specified type '{}' cannot be assigned to type 'ReactNode'

Can someone help me figure out why I am getting this error in Vercel but not locally? Error: 'FontAwesomeIcon' cannot be used as a JSX component. ./components/Services/ServiceContainer.tsx:25:6 12:01:54.967 Type error: 'FontAwesomeIcon&a ...

javascriptreactjsnext.jsvercel

Showing information from asynchronous AsyncStorage.getItems in React Native

In my app, users have to validate their success on challenges by clicking a validation button which saves the "key":"value" pair of the challenge using this function: async function validate(challenge_nb) { try { await AsyncStorage.setItem(challenge_n ...

javascriptreactjsasynchronousreact-native

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

javascripthtmlcss

Issue encountered while configuring server using express.js

Here is the server.js file I am working on, but I encounter a specific error when trying to set up the server with Express.js var express = require('express'); var app = express(); var PORT = process.env.PORT || 3000; app.all('/*', ...

javascriptnode.jsexpress

Getting around using Material-UI Icons

Is it possible to utilize a Material-UI Icon for navigation using React Router Dom? I attempted the following approach without success: <NavigateBeforeIcon path="/vehicles"></NavigateBeforeIcon> With buttons, I am able to use component={Link ...

javascriptreactjstypescriptmaterial-uireact-navigation

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

cssanimation

Conceal content within a bullet point

I'm encountering an issue with this specific element. HTML <div class="navbar slide-menu"> <div class="container"> <ul class="nav navbar-default"> <li class="brand"><a href="#">Menu</a></li> ...

jqueryhtmlcss

Managing the re-triggering of a function within useEffect upon the user clicking the "Back Button" in a React application

Is there a way to prevent the loadUserPosts() function from being called again when the user clicks the 'back button' on their browser? It seems like the isLogged useState is being changed when the back button is clicked. The loadUserPosts funct ...

javascriptnode.jsreactjsreact-hooks

Removing files from the S3 bucket and database simultaneously. Execute each function sequentially

Struggling with an API call that should delete an image from both an S3 bucket and a MySQL database. However, encountering an issue where the S3 image cannot be found because it is being deleted from the database first. // Router code: //req.body is an ar ...

javascriptmysqlreactjsasync-awaitreact-router

When using a variable to fetch data in JSON, an undefined error occurs. However, if a hardcoded index

I am facing an issue while trying to extract and manipulate JSON data from a file for an application I am developing. When looping through the data, I encounter an undefined error that seems to indicate a missing property in the JSON object when accessing ...

javascriptjson

Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/ <div style="display:inline-block"> <div style="display:inline;float:left"> <a href="CollegeProfile.php" class="white"> <h ...

css

Updating the icon with jQuery when receiving AJAX responses

I recently implemented a feature where users can bookmark list entries by clicking on a font awesome link. The bookmarking functionality is working smoothly thanks to AJAX, and the database gets updated as expected. Now, I'm facing an issue with chan ...

jqueryajaxfont-awesome

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Enhancing jQuery Functionality with Parameter Overrides

While it may seem like a simple question, I am new to writing jQuery plugins and could use some clarity on scope rules in JavaScript. My goal is to create a jQuery plugin that interacts with the Stack Overflow API. I have started exploring the Flair API f ...

javascriptjqueryjquery-pluginsstackexchange-api

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

Discovering Unconventional Columns Through Sharepoint REST Api Filtration

I am working on recreating SharePoint's front end in my app and want to add columns to my table just like a user would in SP. The challenge I am facing is determining which columns were custom generated by the user rather than standard ones. Although ...

javascriptajaxrestsharepointsharepoint-online

Interact with PHP by utilizing Jquery to update or remove data using the PUT

I'm running into an issue while trying to utilize Jquery.ajax() with PUT and DELETE methods. I am sending data with the request, but on the PHP side, when I print the request, it shows up empty. $.ajax({ url: 'ajax.php', type: 'DELETE& ...

phprestjquery