# Hover event, but not on touch/mobile devices

**URL:** <https://forum.kirupa.com/t/hover-event-but-not-on-touch-mobile-devices/641166>\
**Category:** Uncategorized\
**Created:** [November 25, 2019, 1:32pm UTC](https://forum.kirupa.com/t/hover-event-but-not-on-touch-mobile-devices/641166 "2019-11-25T13:32:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [November 25, 2019, 1:32pm UTC](https://forum.kirupa.com/t/hover-event-but-not-on-touch-mobile-devices/641166/1 "2019-11-25T13:32:59Z")

</div>

Hi All,

I am trying to create a hover event that shows an image. On my desktop/laptop it fires correctly. However on a mobile (touch), the image only appears when the modal link is clicked, then it is sticky (it stays on screen).

On mobile or touch-screens, i don’t want the hover event to fire.

Here is what i am working with.

[Jsfiddle](https://jsfiddle.net/postcolonialboy/pxwd34ka/4/)

HTML

> ```
> <a href="#test" id="test-parent">Hover to show image</a>
> 
> <img class="preview" id="test-child" src="https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg" />
> 
> <script>
> $("#test-parent").hover(function() {
> $("#test-child").fadeToggle();
> });
> </script>
> 
> ```

CSS

> ```
> .preview {
> display: none;
> position: absolute;
> bottom: 0;
> right: 0;
> z-index: 1;
> height: 50%;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [November 25, 2019, 2:56pm UTC](https://forum.kirupa.com/t/hover-event-but-not-on-touch-mobile-devices/641166/2 "2019-11-25T14:56:34Z")

</div>

from @PaulOB over at sitepoint

```
<script>
  if (!("ontouchstart" in document.documentElement)) {
      $("#test-parent").hover(function() {
       $("#test-child").fadeToggle();
    });
   } 
</script>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 26, 2019, 6:22am UTC](https://forum.kirupa.com/t/hover-event-but-not-on-touch-mobile-devices/641166/3 "2019-11-26T06:22:55Z")

</div>

IThat is a fine solution! Here is an another version that also includes support for older IE browsers: [https://www.kirupa.com/html5/\_if\_you\_are\_on\_a\_touch\_enabled\_device.htm](https://www.kirupa.com/html5/_if_you_are_on_a_touch_enabled_device.htm)

😀