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>