Make Button visible on mouse hover

Question

I would like to add a few buttons (i.e. play, pause,etc) within an html webpage where I have got a camera streaming. My goal is to make these buttons visible on mouse hover. After googling I came across with this code which works great in Chrome, Mozilla, Safari but it doesn't work at all on my iPhone. Please see below the code:

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
   <style type="text/css">
      .HeaderBarThreshold:hover input[type="submit"]
      {
            visibility:visible !important; 
      }
     </style>
</head>
<body ontouchstart="">
  <div class="HeaderBarThreshold" onclick=()>

  Hover over here to make button visible
    <input type="submit" value="Click me" style="visibility:hidden;"/>
  </div>
    <br/>
</body>
</html>

The odd think is that if I try this code itself in JSBin or jsfiddle on my iPhone it does works. But when I create an HTML page containing the above code (on a raspberry pi running apache) then it doesn't work on my iPhone.

Hopefully someone will shed some light on it as I can't get my head around it.

Many thanks.

There is no hover event on a touch device: [hover mobile OR touchedevice OR smartphone](https://www.google.nl/search?q=hover+on+mobile+OR+touchdevice+OR+smartphone) — mplungjan, May 07 '17 at 09:30
@mplungjan: Would you please explain to me how change my code to implement the solution as per your link? Also would you please clarify why the code works on jsfiddle on my iPhone but not straight into an HTML page? — albertone74, May 07 '17 at 09:45
Try adding an empty onclick handler inline on the button - just `onclick=""` — mplungjan, May 07 '17 at 09:48
@albertone74 If you are asking what the difference is between a jsfiddle and a HTML page elsewhere, you will have to provide links to both! — Mr Lister, May 07 '17 at 09:52
@mplungjan: Thanks. Sorry I didn't get which line I am supposed to add onclick="" — albertone74, May 07 '17 at 09:58
@mplungjan: Thanks. I have tried that but it didn't work.Now the button is permanently visible. — albertone74, May 07 '17 at 10:04
Yes you were correct. I have left a "," Now it works fine on my laptop but still doesn't work on my iPhone. Any other suggestion please? — albertone74, May 07 '17 at 10:11
I have also tried with the active selector as well but to no avail .HeaderBarThreshold:active, .HeaderBarThreshold:hover input[type="submit"] — albertone74, May 07 '17 at 10:17
I think I made a progress.
. Now when I tap on the iPhone screen I can see the button. However the button doesn't disappear when I tap again on the screen. Nearly there though! — albertone74, May 07 '17 at 11:37

score 0 · Accepted Answer · answered May 07 '17 at 12:02

0

Bingo! I got it! Adding the following line did the trick:

<body ontouchstart="">

I have edited the code in my first post to add the two working tweaks.

Thanks a lot mplungjan for your kind help! How can I accept your suggestion?

answered May 07 '17 at 12:02

albertone74

17
8

While @mplugjan helped, he didn't mention the word "ontouchstart". You found out the working solution yourself. Just accept this one. – Mr Lister May 08 '17 at 06:14

Make Button visible on mouse hover

1 Answers1