Question

所以我对链接有悬停效果。

我知道如果您在移动设备上点击某些内容，它会激活：hover属性。

但是，它也会跟随链接。

我想知道是否有某些方法可以让悬停效果出现在移动设备和个人电脑上，而无需点击并关注链接。

Answer 1

我猜您可以使用touchstart事件

请参阅How do I simulate a hover with a touch in touch enabled browsers?

Answer 2

您可以在此处引用代码段 http://codepen.io/mickeykay/pen/wiLno

HTML
<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
  <img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
  <span class="details">Details go here</span>
</span>
CSS
.container {
  position: relative;
}

.container .details {
  display: inline-block;
  position: absolute;
    top: 100%;
    padding: 10px 15px;
    z-index: 1; 
    display: none;
    width: 200px;
    background: #222;
    color: #FFF;
}

.container:hover .details,
.container .details:hover {
    display: block; 
}


/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
    display: none !important;   
}
Jquery
// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
    if ("ontouchstart" in document.documentElement) {
        document.documentElement.className += " touch";
    }

    // Add and remove no-hover class to <li>'s for mobile hover events
    jQuery('.touch .container').each(function() {
        var div = jQuery(this);

        div.hover(function() {
            div.removeClass('no-hover');
        });

        jQuery('*').not(div).bind('click', function() {
            div.addClass('no-hover');
        });

    });

CSS：在没有关注的情况下悬停在链接上（移动）

2 个答案: