When viewing on mobile devices, the hover effect in responsive web design

While working on a responsive website, I encountered some challenges.

I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear.

However, the issue arises when using a mobile device and clicking on the div's position where the button will eventually appear. The "OnClick" function for the button is triggered even before it is visible.

I am seeking a solution to make these buttons clickable only after they have appeared.

Below is my JQuery function that controls the hover effect (I've used "this" because the div is repeated in a List)

        $(this).find(".imovel", this).hover(function(){ 
                $("a.contatos", this).toggle();
                $("a.vermais", this).toggle();
                $(".local", this).toggle();
                $(".valor", this).toggle();                        
        });

Any assistance on this matter would be greatly appreciated.

View the div before clicking View the div after clicking

If I click on the position of the buttons on a mobile device, the OnClick function is triggered before the hover effect and the buttons appear.

Thank you for your help!

As requested, here are some snippets of the code (I did not create this file, but I was tasked with implementing some changes, one of which involves addressing the issue of clicking on mobile devices)

<script type="text/javascript">
    $(document).ready(function () { 
        // code snippets can be added here
    });
</script>

 <li class="item">
        <section class="imovel" onclick="">
            <!-- Content of the section -->
        </section>
    </li>

Answer №1

To provide better assistance, it would be beneficial to have some sample HTML or JavaScript code to work with. Without it, I can only make educated guesses about the issue at hand.

One likely explanation for the problem could be related to how mobile browsers handle mouse actions. Unlike desktops, mobile devices do not have a physical mouse, so browsers create a simulated mouse pointer instead. When a user taps on the screen, the browser moves this simulated mouse to the same location of the tap.

In mobile browsers, this movement of the simulated mouse happens instantly, triggering events in a specific order:

  • hover event - This causes your buttons to be revealed, making them clickable
  • click event - Now that the buttons are clickable, the click event is fired.

All these events occur rapidly and simultaneously, leading to the issue you're noticing.

You can test this behavior using the following jsFiddle link:

https://jsfiddle.net/pw7u039h/

Note: The behavior may vary when using desktop browser's responsive mode.

I encountered this issue on Windows Phone 8 with Internet Explorer, as demonstrated in the jsFiddle provided above. However, Chrome's responsive design mode did not reproduce the problem (Version 56.0.2924.87 64-bit).

Update

I have devised a temporary solution in this updated jsFiddle: https://jsfiddle.net/f1b5e2by/5/

The solution involves using JavaScript to set a variable when a user hovers over an element on a mobile device, signaling the click handler to ignore the subsequent click event. This ignorance is then removed after a specific duration (e.g., 0.2 seconds in my example).

This approach effectively prevents the click handler from executing fully after the hover action reveals elements and triggers a click event.

Cons

  • Challenging to maintain, especially when adding more elements that unhide after hover events
  • Dependent on the device's performance, as slow execution of JavaScript may fail to clear the click ignorance promptly on slower mobile phones

I recommend using a toggle button to toggle the visibility of elements instead.

For further reading on handling the :hover event on touch devices, check out this informative article.

Update

I made further improvements to my initial jsFiddle to address the issue. However, the solution's behavior differs between mobile browsers and responsive design mode. It might be better to stick with a toggle button for consistent control, similar to using "onHover" for mobile users.

Answer №2

Try implementing

JQuery.click(); 

in place of utilizing the onclick attribute

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

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

Limiting access in _app.js using Firebase and Redux

In my application, users can access the website without logging in. However, they should only be able to access "/app" and "/app/*" if they are authenticated. The code I have written seems to work, but there is a brief moment where the content of "/app" ...

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

ObservableResolve(): Unleashing the power of RxJS5 for handling asynchronous data streams

Hey there! To dive deeper into RxJS, I thought of creating my own custom Rx operator. So here's a straightforward one that seems to be working smoothly: Rx.Observable.prototype.multiply = function (input) { const source = this; return Rx.O ...

Generating Arrays of Varying Lengths in ReactJS

When receiving data from the API, I have an array structured like this: [ { "clicks": { "2019-01": [ { "clicks": "194", "type": 0, "user": 19 }, { ...

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

Does __ only function with curried functions as intended? What is the reason for it working in this case?

I'm trying to figure out the reason behind the successful usage of __ in this particular code snippet : function editAddress (id, addressId, model) { return BusinessService .getById(id) .then(unless( () => checkUrlValue(add ...

Showing various divisions based on the selected option from a dropdown menu

My goal is to have forms display below a select tag based on the number selected by the user. I am attempting to achieve this using JQuery, but it's currently not functioning as expected: Select tag:- <label>How many credit cards do you have:* ...

Enhancing DataTable Performance with Django Filters

I have implemented a feature where users can apply filters to customize the data displayed in a Table. When a user interacts with these filters, an asynchronous Ajax call is triggered: $.ajax({ url: '/fund_monitor/fund_directory&a ...

Calculate the sum of a specific column in an HTML table using JavaScript after

I have a function called CalColumnHistDEPOSITO() that I use to sum a table column as it loads from the server side into my HTML page. However, when I apply a filter, it continues to sum the entire table ignoring the filter. (function() { 'use stric ...

Error encountered with React Hooks - TypeError

What I Aim to Achieve Our goal is to utilize Next.js to create a button named 'ConnectMetamask' that, upon clicking, triggers the predefined hooks and stores the value in a variable called 'userSigner'. This functionality is implemente ...

Combine loop results into a string using jQuery

When using jQuery, I need to append a multiline string to an element by adding a string return from each value in a for loop. $("songs-table-tr").append('tr id="songs-table-tr'+count+'" style="display: none">\ ...

Access data from JSON array in Angular 2

I'm facing a basic issue here. I have a JSON file named pageDefinition.json that is being loaded into my component. Here's how the JSON data looks: ... "testArray": [ {"id": 0, "name": "row1"}, {"id": 1, "name": "row2"}, {"id": 2, "n ...

Transmit information from JavaScript to a servlet and receive a response in return

I'm new to using ajax and JavaScript. Currently, I have a simple jsp page containing HTML and an accompanying JavaScript file with all my functions defined. One of these functions sends JSON data to a servlet and now I need assistance in receiving th ...

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

Tips for correcting the sentence that extends beyond the boundaries of the Material UI box

Utilizing Material UI for my project... I am trying to contain the text within a box but facing issues with responsiveness as the text is overflowing outside of the box. Note: I have attempted various solutions from Stack Overflow such as word-wrap, max- ...

Ways to exit the current browser window?

Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...

Update the session's data

Situation : I am working on a basic php form for calculations and pricing. I have set up the add, edit, and delete functions using a switch statement. Within my session, data is stored using $_POST. Issue with Edit Function : if (isset($_POST[&apo ...

"Launching a node server in Azure to get you up and running

Currently, I have a Single Page Application that is hosted on Microsoft Azure. This application requires refreshing some dashboard data every 5 seconds. To achieve this, I have developed a nodejs service that continuously requests data from the API and gen ...

Can someone explain why I can't find yarn dlx? And can you please provide instructions on how to run the yarn

After installing yarn with brew install yarn, I attempted to run yarn dlx storybook@latest upgrade. However, the result showed an error: yarn run v1.22.22 error Command "dlx" not found. info Visit https://yarnpkg.com/en It seems that commands like yarn ad ...