Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook.

It's a simple feature to implement.

Here is the CSS code:

.social_vk, .social_fb {        
    height: 38px;
    object-fit: contain;
    cursor : pointer;
    opacity: 1;
}

.social_vk:hover, .social_fb:hover {
    opacity: 0.7;
}

And here is the HTML code:

<div class="social">
<img src="/images/vk.svg" class="social_share social_vk" data-type="vk" ontouchstart="this.style.opacity = '0.8'" ontouchend ="this.style.opacity = '1'">
<img src="/images/facebook.svg" class="social_share social_fb" data-type="fb" ontouchstart="this.style.opacity = '0.8'" ontouchend="this.style.opacity = '1'">

The issue is when tapping on the button, it opens a modal window for Facebook and the button's opacity remains at 0.8.

I'm not sure how to resolve this problem as I seem to be stuck here.

javascriptjquerycss

Answer №1

Utilizing the styles property to change styles may lead to unintended consequences due to them being inline. It is recommended to instead apply or remove another class from the element for smoother handling.

The primary modification is as follows: 

ontouchstart="this.classList.add('hover')" ontouchend="this.classList.remove('hover')"
.

Keep in mind:

The touchstart event will only be functional on touch screen devices.

.social_vk, .social_fb {        
    height: 38px;
    object-fit: contain;
    cursor : pointer;
    opacity: 1;
}

.social_vk:hover, .social_fb:hover ,
.social_vk.hover, .social_fb.hover {
    opacity: 0.7;
}
<div class="social">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" class="social_share social_vk" data-type="vk" ontouchstart="this.classList.add('hover')" ontouchend ="this.classList.remove('hover')">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkiPlfDwADmwHcaV65UQAAAABJRU5ErkJggg==" class="social_share social_fb" data-type="fb" ontouchstart="this.classList.add('hover')" ontouchend="this.classList.remove('hover')">

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 standard process and organization of a project using AngularJS in conjunction with Python Flask

As someone new to the MV* client-side framework craze, I find myself leaning towards AngularJS over Knockout, Ember, or Backbone. However, I'm unsure about the workflow involved. Should I start by developing a client-side application in AngularJS and ...

javascriptpythonflaskangularjs

Tips for safeguarding AJAX or javascript-based web applications

Utilizing AJAX, this function retrieves information about an image in the database with the ID of 219 when a button is clicked. Any visitor to this webpage has the ability to alter the JavaScript code by inspecting the source code. By modifying the code a ...

javascriptajaxcode-injectionwebsecurityclient-side-attacks

The issue of losing session data in Laravel 4 due to multiple AJAX requests

There is an issue on my page where photos are lazy loaded via AJAX, and sometimes all session data gets lost while the photos are loading. This problem does not occur consistently every time the page is loaded. I have already checked for session timeout or ...

phpjqueryajaxsessionlaravel-4

Storing input data in a JavaScript array instead of sending it through an AJAX request

I've been grappling with this issue for quite some time now, and I just can't seem to wrap my head around it. While there are a few similar solutions out there, none of them address my exact problem. Here's the scenario: I have a form where ...

javascriptjqueryajaxforms

Modifying attributes of an object within a document using Mongoose

Encountering an issue where the sentiment object in my document is not updating. Within my Model Class, there's a field named sentiment of type Object structured like this: sentiment: { terrible: 0, bad: 0, okay: 0, good: 0, fantastic: 0 } ...

javascriptnode.jsexpressmongoose

Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size: The red part should change in both width and height The blue part should only adjust in height, not width ...

javascripthtmlcssreactjselectron

How to retrieve the width of an unspecified element using JavaScript

Seeking help with a div element that adjusts its size based on the elements it contains. How can I determine the final size of this dynamic div without checking the sizes of its internal elements? I've attempted to parse all the properties of the obj ...

javascriptjquerycssdimensions

Ways to verify the authenticity of a JWT token

I recently came across a tutorial on creating user authentication with Vue.js and Lumen. The tutorial utilizes the tymon/jwt-auth library to handle authentication. So far, everything is working smoothly. The API manages all my data and provides a token to ...

javascriptlaravelvue.jslumen

Display sub-objects within Chart.js

I'm currently tackling a project in Ionic 3 where I am utilizing an API that returns a JSON response with nested objects. My goal is to display certain aspects of these objects within a bar graph using chart.js. Unfortunately, I lack experience in ma ...

javascripttypescriptchartschart.js

Excessive use of the style attribute within an AngularJS directive

My AngularJS directive includes the replace: true and template: <span style="color: red;"></span> properties. However, when I use this directive in my code, it appears that the style attribute is duplicated in the rendered HTML: <span style= ...

javascriptangularjsangularjs-directive

Adding and subtracting quantities inside a loop

My current issue involves a +/- quantity feature that is functioning correctly, but when integrated into a loop, the quantity amounts duplicate for each input field when the +/- buttons are clicked - please refer to the attached screenshot below. Screensh ...

phpjquery

When utilizing Rx.Observable with the pausable feature, the subscribe function is not executed

Note: In my current project, I am utilizing TypeScript along with RxJS version 2.5.3. My objective is to track idle click times on a screen for a duration of 5 seconds. var noClickStream = Rx.Observable.fromEvent<MouseEvent>($window.document, &apos ...

javascripttypescriptreactive-programmingrxjsobservable

Error: Uncaught TypeError - Unable to access the 'handleClick' property of undefined within a forEach loop

I came across the following code snippet articles_list.jsx import React from 'react'; import './articles_list.css'; export default class ArticlesList extends React.Component { constructor(props) { super(props); this.state ...

javascriptreactjs

"Handsontable organizes information pulled directly from the backend database using JSON/AJAX

In order to implement the Handsontable column sorting and direction indicators, I would like to create a mechanism that sends sort requests to my database and displays the corresponding results. Although the Handsontable sort plugin is effective in allowi ...

jqueryjsonajaxsortinghandsontable

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

Looking for a comprehensive pagination solution using jQuery and Ajax?

Hello, I've been struggling to implement pagination along with displaying data in my project. I have managed to display the data successfully, but incorporating pagination has proven to be a challenge for me. Does anyone have any examples or hints on ...

jqueryasp.netajaxasp.net-mvcpagination

Guide on exporting type definitions and utilizing them with npm link for a local package

I am in the process of developing a new testing tool called tepper as an alternative to supertest. My goal is to make this package available in both ESM and CJS formats. However, I'm encountering an issue where users of the library are unable to locat ...

javascripttypescriptnpmtypescript-typingsnpm-package

Retrieve information from the Action controller to communicate with Jquery via an HttpPost or Get request

I am trying to retrieve the result of a calculation in my action controller by calling the action using an AJAX HTTP POST request. I want to capture the value of the calculation and display it in a div element. However, I am unsure whether I should use HTT ...

jqueryajaxasp.net-mvcasp.net-core

Improving the functionality of a dynamic Mongoose JS application

Hey there, I have a pretty simple question that I couldn't find an answer to on Google. So, I'm experimenting with Mongoose JS and I'm curious about how to update a live application. Let's say I've defined a schema in my node.js ...

javascriptnode.jsmongodbexpressmongoose

Using CSS3 to Enhance the Look of Multiple Background Images

While I've come across similar inquiries, I haven't found a satisfactory explanation yet. My aim is to grasp the best CSS practices for implementing multiple repeating backgrounds. Essentially, I want a background image to repeat across the entir ...

htmlcss