Remove the ahover effect on touch for iPad and iPhone devices

I have a button with a:hover effect, but I want to disable hover on iPad and iPhone. It's not working.

$(document).ready(function () {
            $(".content").hide();
            $(".open1").click(function () {
                $(this).next().slideToggle(400);

                if('ontouchstart' in document){$('#btn_01').unbind('mouseenter mouseleave');}

                var btn = $('#btn_01'), isOn = btn.hasClass('on');              
                if(isOn) { btn.removeClass('on'); }
                else if(btn) { btn.addClass('on'); }
                });
        });

<style type="text/css">

    #btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
        #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
        #btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
javascriptjquerycss

Answer №1

My suggestion would be to take a different approach:

jQuery(function($) {
    var deviceType = ('ontouchstart' in document) ? "touch-device" : "desktop-device";

    $(document.body).addClass(deviceType);
});

You can then make specific style changes using body.desktop-device and body.touch-device:

body.desktop-device #btn_01:hover {
    background: red;
}
body.touch-device #btn_01 {
    background: blue;
}

var result = condition ? valueA : valueB;

// This is equivalent to:

if (condition) {
    var result = valueA;
} else {
    var result = valueB;
}

Answer №2

Discovered a simple solution to this issue by utilizing CSS @media queries which allowed me to change the hover image back to its original form.

#btn_01{btn_01_on.png'}
#btn_01:hover{btn_01_on.png'}
#btn_01.on{btn_01_over.png'}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01:hover{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}

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

Is there a way to create a Vue.js component that retains the data I have added to it even when transitioning between routes? Currently, whenever I switch routes, the component deletes all the previously

I'm currently working on a webshop using Vue.js. When I add products, I utilize an event bus to pass the data to the CartComponent. Everything works as expected; however, if I navigate back or reload the page, all the data in my CartComponent gets del ...

javascriptvue.jscomponentsvue-componentwebshop

Reorganizing array elements to match the order of another array in ES6

I am attempting to organize one array based on the order of another array... For instance... (Utilizing ES6 React) const orderArr = ["Daniel","Lucas","Gwen","Henry","Jasper"]; const nameArr = ["Gwen","Jasper","Daniel"]; in order to output Daniel // fi ...

javascriptreactjs

Tips for horizontally aligning a modal with smooth transition effects using Material UI and ensuring it is responsive

Struggling to center a modal with transition using Material UI and facing challenges with responsiveness on small screens, particularly mobile devices. The modal looks good and is centered on smaller screens if no transition is used. However, when a trans ...

cssmaterial-uiresponsive

Identifying the direction of scrolling - boolean variable inaccurately assigned on initial change of scroll direction

Is there a way to determine if I am scrolling up or down? I have a global variable that should be set to true when scrolling down and false when scrolling up. The issue arises when I scroll down once and continue to scroll in the same direction. The conso ...

jquery

Express with NodeJS Electron

Currently, I am working on developing a web application using electron for the website and desktop application and express for sessions. This is the code snippet from my app.js: const express = require('express'); const {app, BrowserWindow} = re ...

javascriptnode.jsexpresselectron

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

javascriptcssreactjsinline-stylesreact-flow

Tips for inserting values into an array in NodeJS

Hello there! I am currently in the process of learning Node and experimenting with some interesting things using JavaScript and Node.js. However, I have hit a roadblock while trying to combine separate "where" statements in Sequelize into one cohesive stat ...

javascriptarraysnode.jssequelize.jskoa

Issue with v-model not updating data correctly when using switch and select dropdown in VueJS

I am developing a dynamic admin panel that includes a CRUD generator using Laravel and Vue. Within my table, I am asynchronously loading data from an API. One specific column in the table, called is_featured, needs to function as a switch. This will allow ...

javascriptphplaravelvue.jsaxios

Utilizing a CSV file as a Map with D3 and JavaScript

After thorough research through JavaScript and D3 documentation, I have not been able to find a solution to my problem... Is it feasible to import a CSV file with the following format: header, header string1, string string2, string ... stringN, string an ...

javascriptnode.jscsvdictionaryd3.js

Unable to access downloaded image stored in disk using node with aws-sdk

After downloading an image file in .png format from my express server using the aws-sdk for node, I am facing an issue when trying to view it on my computer. The error message reads: "It appears that we don't support this file format.". Interestingly, ...

javascriptnode.jsamazon-web-servicesexpressaws-sdk-js

transmit JSON formatted form data to an AngularJS platform

I have a webpage built on AngularJS with a login feature. I want to iframe this webpage onto my own page and automatically log in my users. Upon inspecting the AngularJS site, I noticed that the login procedure expects a json object. I have tried multipl ...

javascriptphpjqueryangularjsjson

Displaying Image Preview in Angular 2 After Uploading to Firebase Storage

At the moment, I am facing an issue where the uploaded image is not being displayed after the uploadTask is successful. This problem arises due to the asynchronous loading nature of the process, causing the view to attempt to display the image before the u ...

javascriptangularfirebasefirebase-storage

What is the best way to access the ng-model of a select element when going through each row of a table?

Consider this code snippet: var rows = [ '1', '2', '3', '4']; // HTML table <tr data-ng-repeat="record in rows()"> <td> <select data-ng-model="dynamicInsurance[record]" ...

javascriptangularjs

The Custom Layout Component in Form.io

I am currently working with Form.io v3.27.1 and I'm in the process of developing a custom layout component, specifically an accordion. I have been referring to the concepts outlined in the CheckMatrix component example as my guide. Successfully, I ha ...

javascriptangulartypescriptformbuilderformio

Is there a way to activate a Vue.js method when clicking a link within a data table?

I'm currently in the process of developing a Vue.js application using the Vue Webpack template. In one of my components, I'm setting up a Datatable like so: <script> export default { name: 'DataTable', mounted() { $(& ...

javascriptvue.jsdatatable

What is the best way to access data from outside a forEach loop in JavaScript?

I am trying to access the value of my uid outside of the foreach loop in my code. Can anyone assist me with this? This is the code I am working with: var conf_url = "https://192.168.236.33/confbridge_participants/conference_participants.json?cid=009000 ...

javascriptarraysajaxjson

Troubleshooting Problems with React-Scroll Link Element in Navigation Bar

Having trouble implementing a hover effect on my navigation links using the Link component from the react-scroll library. The desired effect is for the links to increase in size when hovered over by using transform: scale(1.1). Unfortunately, the effect is ...

cssreactjsreact-scroll

To customize or not to customize?

Lately, there has been a growing trend of people incorporating custom attributes into their HTML tags to add extra data for use in JavaScript code. I'm curious to hear thoughts on the practice of using custom attributes and what alternatives are avai ...

javascripthtmlxhtmlcustom-attribute

Centered Menu with Left Alignment

I am trying to figure out how to align a sublist directly under a main list point that is centered. I have attached some images to show what I am aiming for: Currently, when I center the main list point (LEISTUNGEN), I am facing issues placing the sublist ...

htmlcss

Employing multiple ng-click functions within a single input field in Angular

Is it possible to bind multiple functions to ng-click in AngularJS? If so, how can this be done? If not, what alternative approach can be taken? <input type="radio" name="op1" ng-click="chkVal()" ng-value=""> There are two functions named chkVal() ...

javascriptangularjs