-4

I'm trying to incorporate a hover image rotating function on a website used on tablet. Unfortunately I am a bit lost on how to solve the last pieces of the puzzle. Anyone able to help? THe script below rotates an images when hovering and adds an additional text box.

jquery:
$(document).ready(function(){
  $(".1").hover(
function(){$("#Information-Seawater").show();},
function(){$("#Information-Seawater").hide()});

});

jQuery(function(){
     $(".1").hover(
          function(){this.src = this.src.replace("-Icon","-Image");},
          function(){this.src = this.src.replace("-Image","-Icon");
     });
});

style:

#Information-Seawater {
    display: none;
      top: 650px;
      margin-left:auto;
    margin-right:auto;
    width:60%; 
    font-family: Consolas;
    background: #00bbe4;
    border: 2px solid black;
    COLOR: #006080; 
  }

html:

<td class="style6" style="height: 77px; width: 140px"><a href="Http://"><img `id="1" height="147" src="website-%20images/Seawater-Icon.jpg" alt="" class="1" width="140"></a></td>`

<div id="Information-Seawater">
<span class="Information-Header">text<br /></span>
text
<br />
</div>

The above script works well on a pc, but not on a tablet. I hope someone is able to help me to incorporate the above with the function like the ones below, where on a tablet an images needs to be clicked once before hovering kicks in.

http://jsfiddle.net/c_kick/s9rB4/

or

Jquery hover function and click through on tablet

Any help is appreciated!

Community
  • 1
  • 1
Steven
  • 1

1 Answers1

2

You cannot hover on a tablet because no event happens until you touch the screen at which point it is a click. Try detecting when it is a tablet and bind a click event instead of a hover.

Dhunt
  • 1,584
  • 9
  • 22