Javascript 基于jQuery中主体的类执行悬停函数

我有一个悬停函数，它可以在悬停在某些链接上时显示文本，效果很好。但是，仅当主体没有类

用户正在触摸时，我才尝试执行此功能。这有可能吗？如果有，我该怎么做


$（.o-c”）.hover（函数（）{
$（'.home-o-c'）.show（）；
$（'.home-i-t'）.hide（）；
}，函数（）{
$（'.home-o-c'）.hide（）；
$（'.home-i-t'）.show（）；
});
$（“.c-f”）.hover（函数（）{
$（'.home-c-f'）.show（）；
$（'.home-i-t'）.hide（）；
}，函数（）{
$（'.home-c-f'）.hide（）；
$（'.home-i-t'）.show（）；
});
$（“.i-c”）.hover（函数（）{
$（'.home-i-c'）.show（）；
$（'.home-i-t'）.hide（）；
}，函数（）{
$（'.home-i-c'）.hide（）；
$（'.home-i-t'）.show（）；
});
$（“.c-u”）。悬停（函数（）{
$（'.home-c-u'）.show（）；
$（'.home-i-t'）.hide（）；
}，函数（）{
$（'.home-c-u'）.hide（）；
$（'.home-i-t'）.show（）；
});
addEventListener（'touchstart'，函数onFirstTouch（）{
//我们可以去上课
document.body.classList.add（'user-is-touching'）；
//或者设置一些全局变量
window.USER_为_=true；
//或者以通常的方式设置应用程序的状态
//我们只需要知道一次有人触摸了屏幕，这样我们就可以停止听了
removeEventListener（'touchstart'，onFirstTouch，false）；
}，假）；
$（“.o-c”）。单击（函数（）{
if（$（'body'）.hasClass（'user-is-touching'））{
$（'.home-o-c'）.show（）；
}否则{
$（'html，body'）。设置动画({
scrollTop:$（“.our company”）.offset（）.top
}, 2000);
}
});
$（“.c-f”）。单击（函数（）{
if（$（'body'）.hasClass（'user-is-touching'））{
$（'.home-c-f'）.show（）；
$（'.home-o-c'）.hide（）；
$（'.home-i-c'）.hide（）；
$（'.home-c-u'）.hide（）；
$（'.home-i-t'）.hide（）；
}否则{
$（'html，body'）。设置动画({
scrollTop:$（“.cf2”）.offset（）.top
}, 2000);
}
});
。左填充{
背景：#0000006b；
高度：100vh；
}
.正确填充{
背景：粉红色；
高度：100vh；
}
.vc_col-sm-6{
宽度：50%；
浮动：左；
}
.枢轴导航{
列表样式：无；
字体系列：“蒙特塞拉特”；
文本对齐：左对齐；
}
.轴心导航李a{
字体大小：1.6rem；
字号：700；
文本转换：大写；
显示：内联块；
位置：相对位置；
颜色：#fff；
文字装饰：无；
线高：40px；
}
.pivot导航li a.default-underline:：之后，
.pivot导航李a:悬停：：之后{
宽度：100%；
}
.pivot导航：悬停a.default-underline:非（：悬停）：：之后{
宽度：0；
}
.pivot导航李a：：之后{
底部：0；
内容：“；
显示：块；
高度：4px；
位置：绝对位置；
背景：#fff；
过渡：宽度0.3s至0.0s；
宽度：0；
}
.home-o-c，
.home-c-f，
.home-i-c，
.home-c-u{
显示：无；
}
.我们公司{
明确：两者皆有；
显示：块；
高度：50vh；
}
.cf2{
明确：两者皆有；
显示：块；
高度：50vh；
}

文本一

文本一

c-f的文本

更多有关i-c的文本
联系






我们公司向下滚动
向下滚动
您可以使用更复杂的选择器

$('body:not(.user-is-touching) .c-u')

或者可以在处理程序中添加“IF”语句
等等：

您可以使用更复杂的选择器

$('body:not(.user-is-touching) .c-u')

或者可以在处理程序中添加“IF”语句
等等：

您可以在将
用户正在触摸的
类添加到
正文
时解除事件绑定

范例

$(".c-f").unbind('mouseenter').unbind('mouseleave')

或

更新
请参阅此代码段

// Replace this event listener with your hover listeners

window.addEventListener('touchstart', function onFirstTouch() {
  // we could use a class
  document.body.classList.add('user-is-touching');

  // or set some global variable
  window.USER_IS_TOUCHING = true;

  // or set your app's state however you normally would

  // Remove mouse-related events here

   $(".o-c, .c-f, .i-c, .c-u").unbind('mouseenter').unbind('mouseleave')

  // we only need to know once that a human touched the screen, so we can stop listening now
  window.removeEventListener('touchstart', onFirstTouch, false);
}, false);

您需要更新html代码，以便在下面显示
data attr
属性更新代码

<li class="pivot-nav-item"><a data-attr="o-c" class="o-c default-underline" href="#"
            data-toggle="my-scrollspy-2">O C</a></li>
        <li class="pivot-nav-item"><a data-attr="c-f" class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
        <li class="pivot-nav-item"><a data-attr="i-c" class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
        <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-attr="c-u" class="c-u" href="#">C U</a></li>





您可以在将
用户正在触摸的
类添加到
正文
时解除事件绑定

范例

$(".c-f").unbind('mouseenter').unbind('mouseleave')

或

更新
请参阅此代码段

// Replace this event listener with your hover listeners

window.addEventListener('touchstart', function onFirstTouch() {
  // we could use a class
  document.body.classList.add('user-is-touching');

  // or set some global variable
  window.USER_IS_TOUCHING = true;

  // or set your app's state however you normally would

  // Remove mouse-related events here

   $(".o-c, .c-f, .i-c, .c-u").unbind('mouseenter').unbind('mouseleave')

  // we only need to know once that a human touched the screen, so we can stop listening now
  window.removeEventListener('touchstart', onFirstTouch, false);
}, false);

您需要更新html代码，以便在下面显示
data attr
属性更新代码

<li class="pivot-nav-item"><a data-attr="o-c" class="o-c default-underline" href="#"
            data-toggle="my-scrollspy-2">O C</a></li>
        <li class="pivot-nav-item"><a data-attr="c-f" class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
        <li class="pivot-nav-item"><a data-attr="i-c" class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
        <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-attr="c-u" class="c-u" href="#">C U</a></li>





$（'body:not（.user is touching）.c-u'）
使用此命令，我得到了一个未捕获的错误SyntaxError:Unexpected Identifier它应该可以正常工作，也许您在其他地方有错误？下面是一个例子：
$（'body:not（.user is touching）.c-u'）
使用它，我得到了一个未捕获的错误SyntaxError:Unexpected identifierIt应该可以很好地工作，也许你在其他地方有错误？下面是一个例子：更新了答案请现在看一看，如果有任何疑问请让我知道更新了答案请现在看一看，如果有任何疑问请让我知道