Question

基本上我是一名网页设计师，我对jQuery了解不多，所以我有点失落。我写了一些jQuery脚本来管理按钮，但它们没有我想在PC和Touch设备上的行为。

我有两个按钮系列需要管理。 “图像”按钮（交换）和CSS按钮（背景颜色更改）。

我想禁用Touch设备上的“悬停”效果，因为它管理不善，但鼠标点击触控设备和PC。但是戏剧就在那里。

以下是我创建的模型：Model

这是我写的这个烂摊子：

// Rollover on image
$(function() {
    $('img.rollover').on('mouseenter', function(){
    $(this).css("cursor", "pointer");
        this.src = this.src.replace("-normal","-hover");
    });

    $('img.rollover').on('mouseleave', function(){
        this.src = this.src.replace("-hover","-normal");
    });
});

// Toggles forms
$(function() {
    $("#form-contact").hide();
    $("#form-devis").hide();

      $("#btn-contact").click(function(){
        $(this).toggleClass("btn-form-hover");    
        $("#form-contact").fadeToggle(500, "linear");
        $("#form-devis").hide();
        $("#btn-devis").removeClass("btn-form-hover");
  });

    $("#btn-devis").click(function(){
        $(this).toggleClass("btn-form-hover");
        $("#form-devis").fadeToggle(500, "linear");
        $("#form-contact").hide();
        $("#btn-contact").removeClass("btn-form-hover");
  });
});

// Toggle client area
$(function() {
    $("#div-client-area").hide();

        $("#btn-clients").click(function(){ 
        $("#div-home").toggle(500,"linear");
        $("#div-client-area").toggle(500,"linear");
  });
});

Answer 1

默认情况下，触控设备不支持悬停。但是，您似乎正在尝试使用jQuery创建悬停效果，您不一定需要这样做！只需使用CSS即可div:hover{ cursor:pointer; background-color: xyz... }。这将适用于桌面，但不适用于触摸。

或者，您可以使用名为Modernizr的轻量级库来检测浏览器中是否存在触摸事件。它会根据可用的功能向<html>标记添加类。它测试的功能之一是触摸，因此您可以检查类是否存在并相应地形成条件语句。类似于if($("html").hasClass("touch"){ ... })。

希望能给你一个大方向。

PC和Touch设备之间的按钮行为（jQuery）

1 个答案: