Question

我很困惑为什么.hover（）在iOS上表现如此。

在桌面上，我有投资组合图库图像，链接到我工作的各个页面。当您将鼠标悬停在任何图像上时，它会略微淡化，并且标题会以动画形式显示。每当我在手机上查看同一个图库时，淡入淡出和动画都会在触摸时发生，但在我再次点击之前不会将我带到工作目标网页。好像它被卡在了悬停中。有什么想法吗？

我知道我可以检查浏览器宽度并在我开始进入移动断点时禁用悬停但我宁愿在桌面浏览器上仍然可以使用此功能。如果可能的话，我完全可以在移动设备中一起删除悬停行为。

我的代码：

@Override

public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
    String headerTitle = (String) getGroup(groupPosition);
    if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) this._context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.list_group, null);
    }

    TextView lblListHeader = (TextView) convertView.findViewById(R.id.lblListHeader);
    ImageView groupIndicator = (ImageView) convertView.findViewById(R.id.group_indicator);
    lblListHeader.setTypeface(null, Typeface.BOLD);
    lblListHeader.setText(headerTitle);
    if (isExpanded)
        groupIndicator.setImageResource(android.R.drawable.arrow_up_float);
    else
        groupIndicator.setImageResource(android.R.drawable.arrow_down_float);

    return convertView;
}

Answer 1

您可以检查客户端是否是具有相当直接检查的手机，如下所示：

function clientIsMobilePhone() 
{ 
    return  navigator.userAgent.match(/Android/i)
    || navigator.userAgent.match(/webOS/i)
    || navigator.userAgent.match(/iPhone/i)
    || navigator.userAgent.match(/iPad/i)
    || navigator.userAgent.match(/iPod/i)
    || navigator.userAgent.match(/BlackBerry/i)
    || navigator.userAgent.match(/Windows Phone/i);
}

然后执行以下操作：

/*targeted element*/
<a class="workBox" href="<?php echo get_permalink( $the_query->ID ) ?>" ><div class="work" style="background: url('<?php echo $image[0]; ?>') center no-repeat; background-size: cover;"></div><div class="workTitle"><?php echo get_the_title( $the_query->post_title ); ?><div class="landingOffered"><em><?php echo $service; ?></em></div></div></a>

$('.workBox').hover(function() {

        if(clientIsMobilePhone()) return;

        $(this).find('.work').css('opacity' , '0.1');
        $(this).find('.workTitle').fadeTo(200 ,1);
        $(this).find('.landingOffered').velocity({'margin-top': '-5px'}, 200);
    }, function() {

        if(clientIsMobilePhone()) return;

        $(this).find('.work').css('opacity' , '1');
        $(this).find('.workTitle').fadeTo(200 , 0);
        $(this).find('.landingOffered').velocity({'margin-top': '10px'}, 200); 
 });

iOS上的.hover（）的奇怪行为

1 个答案: