Question

需要帮助触摸设备上的悬停状态。在触摸设备上，一次单击后应该可以看到悬停状态，然后第二次单击应该触发链接。

我有启用触摸事件的modernizr，但在我的情况下我不知道如何处理它。

<div class="frontblock">
    <a href="">
        <div class="more">Here is a description</div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/1/1c/CSS.png" />
    </a>
</div>

.frontblock {
    padding: 0;
    overflow: hidden;
    position: relative;
    height: auto;
    background: #333;
    width: 50%;
}
.frontblock img {
    width: 100%;
    height: 100%;
    display: block;
}
.frontblock .more {
    background: #FFF;
    position: absolute;
    text-align:center;
    margin-top: 130px;
    z-index: 100;
    left: 0;
    opacity: 0;
    width:100%;
    height:100%;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
.frontblock:hover .more {
    opacity: 0.8;
}

在jsfiddle上看到它 http://jsfiddle.net/rhodesign/nhDbL/

让我解释一下我的问题。

我有多个框，例如投资组合页面（.frontblock）。
每个框都是指向不同页面的链接，并显示图像。
在鼠标悬停（悬停）时，该框与某些描述（.more）重叠。
点击该链接将会打开。

在移动设备（触控设备）上，我希望首次点击后悬停（.more），然后需要第二次点击才能触发链接。

Answer 1

尝试这样的事情。

它是一个原始代码。希望它有用

$(document).ready(function(){
    var ab = $('.frontblock a');    
    $('.frontblock a').click(function(){
        $(this).addClass('clicked');
        $(".frontblock a").attr("href", "http://www.google.com/");
    });
});

更改悬停互动以点击触控设备

1 个答案: