Disable the :hover functionality for mobile devices

While I have successfully implemented the :hover event on my website, I am facing difficulties when it comes to using this feature on mobile devices.

Is there a way to disable this functionality through CSS or JavaScript? Despite numerous attempts, I have been unable to find a solution.

I attempted using modernizr.com and media queries, but unfortunately, I did not achieve the desired outcome.

Here is my SASS code snippet:

ul {
    li {
      padding: 20px;
       &:hover {
        background-color: $red;
        color: $black;
      }
    }
  }

Media query used:

@media (max-width: $screen-sm-min) {
  ul {
    li {
      &:hover {
        color: inherit; 
        cursor: pointer;
      }
    }
  }
}

SASS variable for media query:

$screen-sm-min: 768px;
javascriptjquerycsssass

Answer №1

One way to enhance user interaction is by utilizing CSS media queries for handling features: http://caniuse.com/css-media-interaction

You have the option to selectively apply :hover styles based on the availability of this feature

@media (hover: hover) {
    .your-selector:hover {
        color: red;
    }
}

Alternatively, touch capabilities can be detected using javascript, although this approach is not recommended as CSS now offers dynamic solutions.

/* add a class to <html> */
var isTouch = 'ontouchstart' in window;
document.documentElement.className += isTouch?' touch ':' no-touch ';

/* only use hover when the no-touch class is present */
.no-touch {
    .your-selector:hover {
        color: red;
    }
}

By incorporating the last method into your code:

ul {
  li {
    padding: 20px;
     .no-touch &:hover {
      background-color: $red;
      color: $black;
    }
  }
}

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

Gulp is ensuring the destination file remains unchanged

I'm encountering an issue with gulp in my project. I've set up a process to automate the compilation of source and styles into a single file using gulp. However, I'm facing a problem where it doesn't want to overwrite the `application.j ...

javascriptbuildgulpconcatenationoverwrite

The API response indicates that the service is currently not accessible

I'm attempting to retrieve a report from the MOZ API, but I keep receiving this response: { "status" : "503", "error_message" : "Service Temporarily Unavailable" } This is the code I am using: function MozCall(callback) { var mozCall = ' ...

javascriptnode.jsexpress

Using the Jquery .each() method with Flickr JSON data

When looping over the JSON data returned from Flickr, I expected to alert 0, 1, 2, 3... for the index. However, it is actually alerting id, server, farm, etc. $.each(data.photo, function(index,item){ alert(index); }); UPDATE: By the way, I am utiliz ...

jqueryjsonflickr

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Greetings everyone! I am a newcomer to the world of Angular, where I have successfully created a dynamic list of checkboxes. However, I have encountered a challenge when trying to bind selected values from an API to these checkboxes. <div *ngFor="let b ...

javascripthtmlangulartypescript

Can you explain the distinction between JSON syntax and object assignment in programming?

While exploring the Twitter Client example on Knockoutjs, one may notice that some properties are included in the JSON object while others are assigned outside of it. What distinguishes these two approaches? And why can't methods such as findSavedList ...

javascriptjsonknockout.js

Successful Ajax response and appending options to a select element

Seeking assistance with making an ajax call to retrieve the list of countries from my database. Below are snippets of the code: country.php: while ($country = $stmt->fetch(PDO::FETCH_ASSOC)) { $data[] = $country['country']; } echo json_en ...

phpjqueryajax

Utilizing Dropzone for file uploads in Node.js, Express, and Angular

I'm running into a bit of trouble trying to get the file recognized on the server side with node.js. Especially when trying to access request data, such as req.files or req.body If anyone has any advice, here are some code snippets: HTML: <form ...

javascriptangularjsnode.jsexpress

Button selector in Internet Explorer 7 with an HTML5 doctype

I'm encountering difficulties aiming my buttons in Internet Explorer 7. Is it because this doesn't work with an HTML5 doctype? input[type="button"] { color: red; } only input { color: red; } is effective, but that's not exactly what I&a ...

csshtmlinternet-explorer

executing jQuery toggle on freshly generated content

I have a webpage that I designed using jQuery. Within this page, there is a table with rows assigned specific color classnames (e.g., tr class="yellowclass"). Users can filter the rows by clicking checkboxes to show/hide tables of different colors. The i ...

javascriptjqueryajaxjsondom

Using AJAX and jQuery to refresh a specific div when a specific button is clicked

I have a function that uses AJAX to update votes when clicked. Here is the code: $(function() { $(".vote").click(function() { var id = $(this).attr("id"); var name = $(this).attr("name"); var dat ...

phpjqueryajax

The issue arises when attempting to utilize ExpressJS middleware in conjunction with NextJS Link feature

Incorporating Next with Express routes, I have set up a scenario where /a should only be accessible to authorized individuals, while /b is open to the public. ... other imports... const app = next({ isDev }) const handle = app.getRequestHandler() async f ...

javascriptexpressnext.js

Is the image too tiny for the parallax effect?

It seems like the image at the bottom of the parallax theme is showing some spacing at full height. I initially thought the image was too small, but upon comparing it to the one in the top widget area, its height is actually larger. Should I look for a big ...

cssimageparallax

Examples of merging responsive design and equal height columns in CSS:

As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...

htmlcsslayoutresponsive

Issue with displaying Angular variable on webpage is not happening as expected

It's been a challenging journey trying to self-teach myself Angular.js. Unfortunately, I've hit a frustrating roadblock - the variables just won't display properly on the webpage! <!DOCTYPE html> <html ng-app> <head> & ...

javascriptangularjs

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). https://i.sstatic.net/VNdJ5.p ...

css

How come webpack commonChunk is causing duplication of packages across my bundles?

I am aiming to generate a vendor.bundle.js file using my modules. I have set up webpack as follows: ... entry: { app: ['./src/index.js'], vendor: [ 'axios', 'lodash', 'recharts', &a ...

javascriptnpmwebpack

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image: https://i.sstatic.net/RmJ2o.png However, there's a ...

htmlcssheight

The Select2 ajax process runs twice

I am encountering an issue with a script I have that retrieves data from the backend to populate a select2 dropdown. The problem is that the ajax call is being triggered twice every time, which is not the desired behavior. I'm unsure of what mistake I ...

javascriptjqueryajaxjquery-select2ui-select2

exciting command: templateUrl

I am in need of assistance with a particular issue: I am trying to configure settings for an application and would like to utilize the UI-Bootstrap accordion. This is the HTML code I have so far: <accordion close-others="oneAtATime"> <accor ...

javascriptangularjsangularjs-ng-repeatangular-ui-bootstrapangular-directive

What is the best way to vertically center text within a selection box? (This is not referring to a select box or a div box)

While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box: https://i.sstatic.net/Ws08H.png I am seeking a way to elevate the actual text content within ...

htmlcsstextalignmenttextselection