# How disable the “hover” state of button for iPad Usage

**URL:** <https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311>\
**Category:** Dashboard\
**Created:** [30 October 2019 08:14 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311 "2019-10-30T08:14:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![satoer](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/satoer/32/13780_2.png) [@satoer](https://discourse.nodered.org/u/satoer)\
**Post date:** [30 October 2019 08:14 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/1 "2019-10-30T08:14:53Z")

</div>

I’m running Node-red in on a Synoligy NAS using Docker. I use it to show a domotica Dashboard on a iPad in the wall with data from my Homey (by emulating MQTT).

 ![DSC08296-FB](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7c8aeddb4c18fa67723c2797461279d66d2ddc54.jpeg)  
Its an old iPad 2 with iOS 9.36 (Safari 9). Almost everything is working fine except for the buttons. When I touch the buttons, they sometimes turn lightblue but do nothing (I also don’t see the slightly brighter circle animation on the button when I touch it and nothing happens). After some research I know what the problem is. The ipad is registering a mouse “hover” on the first touch, and a “click” on the second time I touch the button…

Now the question: What’s the simplest way to disable the hover state from the button? Is there a node that I can use with a piece of javascript to disable it?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 October 2019 08:47 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/2 "2019-10-30T08:47:57Z")

</div>

Interesting thread about this here - [https://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users](https://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users)  
No idea which solution would work / is best / is practical... but hopefully has enough ideas to get you moving.

---

<div class="post-metadata">

**Author:** ![satoer](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/satoer/32/13780_2.png) [@satoer](https://discourse.nodered.org/u/satoer)\
**Post date:** [30 October 2019 09:33 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/3 "2019-10-30T09:33:18Z")

</div>

In my research I stumbled on that topic also. But I still don't have a clue how to fix this in a Node-red environment. To my (un-experienced) knowledge, I only can add CSS code inside the node-red environment (not change or remove something like ".hover" syntax). To be honest, I don't even know how to acces the files node-red is using (Synology nas + docker). And I dont think changing the base files is the smartest thing to do, it probably gets broken / overwritten with a update.

I hoped there is something simple like a (template) node with a piece of JavaScript I can add to disable it. I've also disabled scrolling this way.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 October 2019 09:36 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/4 "2019-10-30T09:36:24Z")

</div>

Well yes - as long as it's CSS then you should be able to add it to a ui\_template node - set to be part of the document "head" section - ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c2809a86d7b2f330506304a67cfcb910df3dcb63.png)  
and override any of the CSS

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 October 2019 09:44 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/5 "2019-10-30T09:44:26Z")

</div>

Have you tried with an alternative browser? I know that they are supposed to use the same engine under the skin but maybe other browsers behave better?

---

<div class="post-metadata">

**Author:** ![satoer](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/satoer/32/13780_2.png) [@satoer](https://discourse.nodered.org/u/satoer)\
**Post date:** [30 October 2019 11:58 UTC](https://discourse.nodered.org/t/how-disable-the-hover-state-of-button-for-ipad-usage/17311/6 "2019-10-30T11:58:48Z")

</div>

I'm using a kiosk mode browser (removes adres bar and time / battery bar). But the standard safari behaves the same way. Bound to iOS9 (last iPad 2 version) there aren't a lot of alternatives.