CSS / jQuery Hover效果可以在图像上显示一些文本，但是在移动设备上必须单击两次

Question

我有很多用于类别的面板，当您将其悬停时，更改背景图像（精细）会显示一些介绍性文字（精细），然后单击并转到URL，但是在移动设备上，您必须点按两次面板才能使URL生效和加载。

我试过的

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

这是可行的，但是当您向下滚动手机（在这种情况下为iPhone）在屏幕上滑动时，当您松开手指以滚动时，它将随机跳至页面：

这是我用来显示悬停时隐藏文本的JS：

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

工作示例：

 /* 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> 

Answer 1

好的，我设法解决了这个问题，现在可以使用以下解决方案在台式机和移动设备上按预期工作：

$('.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);
});

Answer 2

检查是否支持触摸事件（移动设备）。 如果不是，则说明您所使用的设备是鼠标。 将一个类应用于该元素。 然后，您可以使用一些逻辑为添加的类为类编写稍有不同的CSS。

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