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

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

Data is not being displayed in the Angular table

Currently, I am working on developing a time tracking application as part of a project. However, I have encountered an issue while attempting to showcase all the entries in a table format (as shown in the image below). Despite having two entries according ...

javascripthtmlangular

Is it feasible to utilize jQuery mobile without the use of AJAX, relying only on styles?

While I am aware of the jQuery Mobile download-customizer, I am struggling to determine which options need to be selected. It appears that the styles for input elements are somehow connected to the AJAX functionality? All I really desire is to have stylis ...

jqueryajaxjquery-uijquery-mobilemobile

Tips for effectively structuring material-ui Grid in rows

I am currently using the material-ui framework to create a form. Utilizing the Grid system, I want to achieve the following layout: <Grid container> <Grid item xs={4} /> <Grid item xs={4} /> <Grid item xs={4} /> </Gr ...

javascriptreactjsmaterial-designmaterial-ui

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

phpjqueryhtmlcssforms

JQuery Modal Popup Firefox flashing issue

This problem is quite unusual and challenging to explain. The issue I am encountering is related to a div containing a dropdown (select list) that displays the hours of a day (0-23). This div is shown in a JQuery modal dialog using the standard jquery met ...

jqueryjquery-uipopupmodal-dialog

What is the best way to direct users to the individual product page once they make a selection

On my main products page, I am fetching all the products from a local JSON file. interface productItem { id: number; name: string; image: string; price?: string; prices: { half: string; full: string; }; ...

javascriptreactjsnext.js

What's the best way to keep track of the number of objects I've created

Using this HTML code, I can create member objects. However, I also need to determine the count of these member objects for certain calculations. Additionally, when a member object is deleted, the count of member objects should be reduced accordingly. The ...

javascriptc#htmlajax

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

htmlcssshopify

Guidance on incorporating a function as a prop in React using TypeScript

I'm currently learning TypeScript with React and ran into an issue. I attempted to pass a function as a property from my App component to a child component named DataForm. However, I encountered the following error: Type '(f: any) => any&ap ...

javascriptreactjstypescript

Insert a numerical value into a list to make a series of numbers whole

I currently have an array of objects that looks like this: var arr = [ { "code": "10", }, { "code": "14", } ] My goal is to expand this array to contain 5 elements. The numbers should ran ...

javascriptarraysreactjs

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

How can DataTables (JQuery) filter multiple columns using a text box with data stored in an array?

I've been attempting to create a multi-column filter similar to what's shown on this page () using an array containing all the data (referred to as 'my_array_data'). However, I'm facing issues with displaying those filter text boxe ...

javascriptjquery

Challenges Encountered When Loading JQuery DataTable with JSON Data in MVC Framework by Clicking a Button

On my MVC page, I have a JQuery DataTable that needs to be populated when the user clicks the Query Button. This is the structure of my DataTable: <table id="mytable" class="table table-striped table-bordered mt-5"> <thead> <tr> ...

jqueryjsonasp.net-mvcdatatables

Animations with absolute positioning not rendering correctly in Safari

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

htmlcssgoogle-chromeanimationsafari

Is it more advantageous in Vue to pre-process and save data directly to the data property, or to utilize computed properties?

I am interested in hearing diverse perspectives on this topic. When working with Vue (and possibly other frameworks), is it more beneficial to prepare non-reactive data through a method and store it in the data for use in the template, or is it preferable ...

javascriptvue.js

Choosing the number of items for each cartItem in KnockoutJS: A comprehensive guide

Greetings! I am new to using knockout and I am attempting to automatically select the quantity for each item in my cart from a dropdown menu. Below is the code I have written: VIEW <div data-bind="foreach: cartItems"> <h3 data-bind="text: ful ...

javascriptjqueryknockout.js

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

javascriptjqueryhtmlajaxautocomplete

Implementing a dynamic tab change functionality with props in Material UI tabs

Observing the following example: Link to Material UI Tabs Suppose I have these tab components within a widget, and I wish to include an image or icon. How can I link the icon or image so that when clicked, it changes to a specific tab without using react- ...

javascriptreactjsmaterial-ui