CSS / jQuery Hover effect to show some text over an image, but on mobile have to click twice

Question

I have a load of panels for categories and when you hover it changes the background image (fine) reveals some small intro text (fine) click and goes to URL however on mobile you have to tap the panel twice in order for the URL to action and load.

What I've tried:

$(".ty-subcategories__item").on("touchend", function(event) {
    window.location.href = $(this).find("a").attr("href");
});

This works but when you're scrolling down the phone (in this case iPhone) swiping on the screen it will go to a page randomly when you release your finger from scrolling:

Here is the JS I have for showing the hidden text on hover:

$('.ty-subcategories__item').hover(
    function() {
        $(this).find('.logo-desc').fadeIn(1000);
    }, 
    function() {
        $(this).find('.logo-desc').fadeOut(1000);
    }
);

Working example:

/* Category panel descriptions */
$('.ty-subcategories__item').hover(
  function() {
    $(this).find('.logo-desc').fadeIn(1000);
  },
  function() {
    $(this).find('.logo-desc').fadeOut(1000);
  }
);

$(".ty-subcategories__item").on("touchend", function(event) {
  window.location.href = $(this).find("a").attr("href");
});

.ty-subcategories__item {
 position: relative;
 margin: 0;
 display: inline-block;
    width: 49%;
}

.ty-subcategories__item .logo-box {
 width: 32.2%;
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    text-align: center;
}

.ty-subcategories__item .logo-box.left {
 left: 0;
}

.ty-subcategories__item .logo-box.right {
 right: 0;
}

.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
 font-size: 0.7rem;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    background: #f14fa1;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    white-space: nowrap;
}

.ty-subcategories__item:nth-child(2n){
 margin-left: 15px;
}

/* root categories */
.root-categories .ty-subcategories__item {
 width: 100%;
 display: block;
}

.root-categories .ty-subcategories__item:nth-child(2n){
 margin-left: 0;
}

.root-categories .ty-subcategories__item:nth-child(4n - 2) {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
}

.root-categories .ty-subcategories__item:nth-child(4n - 1) {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

// fade effects
.category-switch {
 height: 0;
 padding-bottom: 34%;
 display: block;
}

.category-switch img {
 position:  absolute;
}

.category-switch {
  display:inline-block;
}
.ty-subcategories__item .logo-desc {
 display: none;
 position: absolute;
 bottom: 12px;
 background-color: rgb(51, 51, 51, 0.4);
    width: 66.7%;
}
.ty-subcategories__item .logo-desc p {
 padding: 5px 10px;
 color: #ffffff;
}
.ty-subcategories__item .logo-desc .ty-mb-s {
 margin-bottom: 0;
}
.ty-subcategories__item .logo-desc.left {
 left: 0;
}

.ty-subcategories__item .logo-desc.right {
 right: 0;
}
.category-switch img {
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}
.category-switch:hover img.top {
 opacity: 0;
}

<link href="http://2015.ambientlounge.com/var/cache/misc/assets/design/themes/ambientlounge/css/standalone.67cd777c76860b1279c6e9e864b691e31438897268.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="subcategories clearfix">
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-butterfly-hover.jpg?t=1438851963" alt="left" title="left">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-butterfly.jpg?t=1438851964" alt="" title="">
      <div class="logo-desc right" style="display: none;">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>A quilted, supportive chair to cocoon yourself from the world&nbsp;</p>
        </div>
      </div>
      <div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/avatar-lounger-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-avatar-hover.jpg?t=1438858846" alt="left" title="left">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-avatar.jpg?t=1438858846" alt="" title="">
      <div class="logo-desc right">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>The ultimate Home Cinema Bean Bags. Full-body luxury.</p>
        </div>
      </div>
      <div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/twin-couch-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-twin-hover.jpg?t=1438858390" alt="right" title="right">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-twin.jpg?t=1438858390" alt="" title="">
      <div class="logo-desc left" style="display: none;">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>Replace you old sofa with a this versatile &amp; comfy couch.</p>
        </div>
      </div>
      <div class="logo-box right"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/versa-table-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/4/category-panel-versa.jpg?t=1438859006" alt="right" title="right">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-versa.jpg?t=1438858956" alt="" title="">
      <div class="logo-desc left">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>Chic &amp; practical must-have table to mix &amp; match our collection.</p>
        </div>
      </div>
      <div class="logo-box right"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/acoustic-sofa-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/4/category-panel-acoustic-hover.jpg?t=1438859043" alt="left" title="left">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-acoustic.jpg?t=1438859043" alt="" title="">
      <div class="logo-desc right">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>Low riding seat with balance, form and living room harmony.</p>
        </div>
      </div>
      <div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/pet-lounger-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-pet.jpg?t=1438859060" alt="left" title="left">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-pet.jpg?t=1438859060" alt="" title="">
      <div class="logo-desc right">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p><span style="FONT-SIZE: 12px">A super comfy, chew resistant&nbsp;<span style="FONT-FAMILY: Arial, Tahoma, Helvetica, sans-serif; LINE-HEIGHT: 12px">indoor/outdoor bed for dogs of all sizes &amp; breed</span></span>
          </p>
        </div>
      </div>
      <div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/wing-ottoman-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/4/category-pane-wing-ottoman.jpg?t=1438859091" alt="right" title="right">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-pane-wing-ottoman.jpg?t=1438859091" alt="" title="">
      <div class="logo-desc left">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>The Cleverest ottoman with a Memory foam removable cushion.</p>
        </div>
      </div>
      <div class="logo-box right"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/fiorenze-leather-bean-bags/" class="category-switch ty-subcategories-block__a">
      <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-fiorenze.jpg?t=1438859114" alt="right" title="right">
      <img class="ty-pict  ty-subcategories-img top  " src="http://2015.ambientlounge.com/images/category/4/category-panel-fiorenze.jpg?t=1438859114" alt="" title="">
      <div class="logo-desc left">
        <div class="ty-wysiwyg-content ty-mb-s">
          <p>Nothing beats the sheer bliss of sinking into a stylish Fiorenze..</p>
        </div>
      </div>
      <div class="logo-box right"><span class="ty-btn ty-btn__primary">Shop Now</span>
      </div>
    </a>
  </li>
</ul>

Are you using any libraries to handle the responsive end of things e.g. bootstrap? — tredzko, Aug 06 '15 at 22:34
The system is cs-cart which uses bootstrap but i think only for the grid.... these panel features i have built myself. I can update with the CSS for these panels if you need. — James, Aug 06 '15 at 22:46
Let me make sure I understand what you want. Do you want people to be able to single click on mobile, but not visit the page if they're scrolling? Do you want the image to change when they click on it first and they have to double click, or just visit the new page when they click? — tredzko, Aug 06 '15 at 23:11

score 1 · Accepted Answer · answered Aug 06 '15 at 23:06

1

Ok i managed to resolve this and now works as expected on desktop and mobile with the following solution:

$('.ty-subcategories__item').on("mouseenter touchstart", function(event){
    $(this).find('.logo-desc').fadeIn(1000);
});
$('.ty-subcategories__item').on("mouseleave touchend", function(event){
    $(this).find('.logo-desc').fadeOut(1000);
});

answered Aug 06 '15 at 23:06

James

1,561
14
38

Cheers, tried a few solutions but were just causing a lot of bugs with mobile but going back to something simple seemed to do the trick and be bug free haha plus up-vote if you agree on the solution :) – James Aug 08 '15 at 23:30

score 0 · Answer 2 · answered Aug 06 '15 at 23:11

Check to see if touch events are supported (a mobile device). If they aren't, then you are on a device that's using a mouse. Apply a class to that element. Then you can use some logic for writing slightly different CSS for classes with your added class.

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

CSS / jQuery Hover effect to show some text over an image, but on mobile have to click twice

2 Answers2