Basically I am a web designer and I don't know much about jQuery so I'm a little bit lost. I wrote some jQuery scripts to manage buttons but they don't have the behavior as I would like on PC and on Touch devices.

I have two families of buttons to manage. The "images" buttons (swap) and the CSS buttons (background color change).

I would like to disable the "hover" effect on Touch devices because it's mismanaged but keep the mouse clicks on Touch devices AND PC. But the drama is there.

Here is a model that I created: Model

Here is the mess I wrote:

1. // Rollover on image 
2. $(function() {
3. $('img.rollover').on('mouseenter', function() {
4. $(this).css("cursor", "pointer");
5. this.src = this.src.replace("-normal", "-hover");
6. });
7. $('img.rollover').on('mouseleave', function() {
8. this.src = this.src.replace("-hover", "-normal");
9. });
10. }); 
11. 
    
12. // Toggles forms 
13. $(function() {
14. $("#form-contact").hide();
15. $("#form-devis").hide();
16. $("#btn-contact").click(function() {
17. $(this).toggleClass("btn-form-hover");
18. $("#form-contact").fadeToggle(500, "linear");
19. $("#form-devis").hide();
20. $("#btn-devis").removeClass("btn-form-hover");
21. });
22. $("#btn-devis").click(function() {
23. $(this).toggleClass("btn-form-hover");
24. $("#form-devis").fadeToggle(500, "linear");
25. $("#form-contact").hide();
26. $("#btn-contact").removeClass("btn-form-hover");
27. });
28. }); 
29. 
    
30. // Toggle client area 
31. $(function() {
32. $("#div-client-area").hide();
33. $("#btn-clients").click(function() {
34. $("#div-home").toggle(500, "linear");
35. $("#div-client-area").toggle(500, "linear");
36. });
37. });