How can we add hover effects to Ionic / Angular components when touching or clicking?

For my app, I need to replicate the hover effect from CSS on mobile devices. Users can click and drag elements, and when they drag over certain elements, I want those elements to change z-index and other styles. Is there a way in Angular / Ionic or even just using pure CSS to achieve this touch "hover" effect?

I have attempted to add

.myClass:hover{
    color:#000;
    background-color:red;
}

as a simple test to see if it works, and while it does work when hovering with a mouse, it doesn't work while clicking and dragging. Any suggestions?

javascriptjqueryhtmlcssangularjs

Answer №1

Adding a class during touchStart and removing it upon touchEnd is recommended for making specific CSS changes easily.

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

Modifying webpage code

I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...

javascripthtmlcss

Problem encountered when attempting to set and retain default values in a PHP select box

<form name="search" method="post" > Seach for: <input type="text" name="find" value="<?php echo (isset($_POST['find']) ? $_POST['find'] : ''); ?>" /> in <Select NAME="field"> <Option VALUE="catego ...

phphtml

Tips for keeping components mounted despite changes in the path

How can I maintain state in React routes to prevent unmounting when switching between them? In my application, it's crucial to keep the state intact during route changes. When changing routes, the respective components mount and unmount. How can this ...

javascriptreactjsreact-router

The operation of "grunt build" results in a Lexer Error, causing the ng-include

After deploying my unminified code successfully, I proceed to run grunt build and deploy from the dist folder. However, upon checking one of the pages, I encounter a breakage with an error in the console: Error: [$parse:lexerr] Lexer Error: Unexpected nex ...

javascriptangularjsgruntjsangularjs-ng-include

Solving the Angular form glitch: error message not displaying

I am facing an issue with my simple form where I am not able to display errors related to the fields. <html lang="en" ng-app="MyApp"> <head></head> <body ng-controller="AppCtrl"> <form name="myForm" id="myForm"& ...

javascripthtmlangularjs

AngularJS application failing to initialize without a module being included

I'm feeling a bit lost when it comes to angularjs and I have a question about why my angularjs app is refusing to bootstrap without creating a module, even though egghead.io and other tutorials seem to suggest otherwise. Here's a snippet of my HT ...

javascriptangularjsmodel-view-controllerangularjs-scope

Is there a way to prevent Faker from continuously displaying the identical picture?

One of the challenges I'm facing involves using faker to generate an array of random objects. Here's a snippet of what I have: { "image": faker.random.arrayElement([ faker.image.nature(), faker.image.city(), faker.image.food() ...

javascriptjsonnpmfaker

What is the best way to make my if statement pause until a GET request finishes (GUARD) with the help of Angular?

I am currently working on implementing admin routes for my Angular app, and I have used a role guard to handle this. The code snippet below showcases my implementation: However, I would like the get request to finish executing before the if statement begi ...

javascriptangularroutes

Is it possible to create Plane Geometry using HTML elements in webGL?

I am interested in creating a plane with HTML elements in webGL that can perform actions like real HTML. For example, I want to create a button that, when clicked, triggers an animation feedback and runs a certain function. I have looked into solutions suc ...

javascripthtmlthree.jswebgl

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

While I'm not an expert in JS or jQuery, I'm currently working on coding a chat application that requires the following functionality: Retrieve conversation list through an AJAX call Display the conversations on the left side of the webpage aft ...

javascriptjquery

Repetitive Jquery Ajax requests

Does anyone know how I can retrieve data from a server in batches of 50 records until all records have been fetched? var isDataAvailable = true; var startingIndex = 1; while (isDataAvailable) { // Fetch the next batch of records $.ajax({ ur ...

jqueryajax

Tips for managing the three.js player mesh (md2) while incorporating cannon.js physics

Check out a cool demo I recently made the switch to using three.js (coming from a background in OpenGL and C++, so adapting to JavaScript wasn't too difficult). To get a better understanding of how to set things up, I explored various three.js exampl ...

javascriptthree.jscannon.js

How can ASP.Net render "partial" pages without including the <html> tags and similar elements?

In my ASP.Net Webforms project, I am attempting to incorporate jQueryUI AJAX tabs. However, I have encountered a roadblock. When using AJAX, it is necessary to render only a partial page (without <html> and similar elements) through an external URL. ...

c#asp.netjqueryajax

Utilize Google Sheets to extract information from a web address containing quotation marks

I am currently utilizing a script called "ImportJSON" developed by paulgambill https://gist.github.com/paulgambill/cacd19da95a1421d3164 The URL I am working with contains quotes characters For instance: http://SomeAPIULR?{"Type": "SomeType"}&APIKE ...

javascriptjsongoogle-apps-scriptgoogle-sheets

Which is the best option: saving data-containing objects in a separate .js file or in the database?

As I work on developing an RPG game web app, I am looking to store predefined details regarding skills and traits. For example, an array of objects that define attributes like "Battle-hardened grants +2 strength" and "Ruthless past results in -1 social." ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to set the height of an SVG element to match the height of the entire

https://i.sstatic.net/HSdlQ.png I am working with an SVG element and I have a query regarding its positioning. <svg style="height: 100%" viewbox="0 0 100 25" preserveAspectRatio="none"> <path fill="blue" d="M0 30 V12 Q30 17 55 12 T10 ...

htmlcsssvg

What is the best way to compare two arrays of ids in MongoDB to find matching elements?

I have 2 arrays with different ids : bikesWithNoOrders [id , id1 , id2] filteredResult [id3 , id5] Is there a way to query and find all of them at once? This is what I currently have: queryBuilder.find({ _id: { $in: bikesWithNoOrders } }); queryBuilde ...

javascriptnode.jsmongodbexpressmongoose

What is the best method to modify the accurate phone number within my script?

I need help with a text format script. link HTML CODE: <label for="primary_phone">Primary Phone Number<span class="star">*</span></label> <br> <input type="text" name="primary_phone" id="primary_phone" class="_phone requ ...

javascriptjqueryhtmlcss

Unable to style table borders using CSS

I'm having trouble getting the borders to show up on my tables in my application. I added the "border: solid 2px black" line to my CSS, but nothing seems to be changing. Can anyone point out what I might be doing wrong? Here is my CSS: table { ma ...

cssasp.net-mvc

CSS dimensional changes

I am currently working on developing an application that involves incorporating a perspective map with the ability to add map markers represented by absolutely positioned DIVs. However, I seem to be encountering challenges related to transformations and 3D ...

csscss-transforms