为什么 css hover 与 javascript (fullpage.js) 交互，我该如何阻止它？答案

【问题标题】：Why is css hover interacting with javascript (fullpage.js) and how can I stop it?为什么 css hover 与 javascript (fullpage.js) 交互，我该如何阻止它？
【发布时间】：2016-03-13 13:51:36
【问题描述】：

我正在使用两个插件，一个名为 fullpage.js 的基于 jquery 和 css 的页面滚动器，以及一个以不希望的方式交互的 css 悬停效果。 如果用户将鼠标悬停在具有 css 效果的图像之一上，它会以某种方式触发页面滚动器来激活和移动页面。我不希望这种情况发生并想停止它。这是代码笔：http://codepen.io/ihatecoding/pen/pyEbqY

我对 css 和 javascript 的了解不够，无法理解原因。我查看了 fullpage.js 选项，但找不到任何似乎有效的方法 - 将“自动滚动”更改为 false 没有帮助。可能是两个插件的css交互导致的问题，而javascript可能没有引起交互。

要重现不需要的自动滚动，

1) 滚动以使第一部分（“部分 1”中的团队成员）中的图像位于页面顶部，并被窗口顶部遮挡一半。
2) 将鼠标悬停在其中一个团队成员图像上，您应该会看到页面向下移动。

悬停时出现的 div 以及我认为触发不需要的滚动的 div 似乎属于 .member__info 类。

这是我用于悬停效果的插件的 CSS 代码。

/* team member css */
$tisa: ff-tisa-web-pro;

$burlywood: #D9BC55;
$title-on-black: $burlywood;

.wrapper--team {
  margin: 0;
  padding: 2rem 1rem;
  background-color: #E9E7D0;
}

.l-container {
  margin: 0 auto;
}
@media screen and (min-width: 64em) {
  .l-container {
    max-width: 64rem;
  }
}
@media screen and (min-width: 75em) {
  .l-container {
    max-width: 75rem;
  }
}

.team-grid {
  margin: 0;
  text-align: center;
  *zoom: 1;

  &:before, &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }

}

.team-grid__member {
  font-family: $tisa;

  max-width: 100%;
  padding: 0.5rem;
  margin: 0 0 0.5rem;

  display: inline-block;
  float: none;
  width: 100%;

  text-align: center;
  box-sizing: border-box;
position:relative;
}

@media screen and (min-width: 28em) {
  .team-grid__member {
    width: 49%;
    max-width: none;
  }
}
@media screen and (min-width: 42em) {
  .team-grid__member {
    width: 32.5%;
  }
}
@media screen and (min-width: 62em) {
  .team-grid__member {
    width: 19.45%;
  }
}

//////////////////////
// MODULE GRID
//////////////////////
.team-grid__member {
  position: relative;
  overflow: hidden;
}

.team-grid__member img {
  width: 100%;
  height: auto;
  border: 8px solid #fff;
  box-sizing: border-box;
  display: block;
}

.member__info {


  color: #fff;
    height: 86%;
    width: 86%;
    position: absolute;
    top: 16px;
    left:16px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.85);
    backface-visibility: hidden;
    transition: opacity 0.4s ease-in-out;
z-index:50;
  }

.member__name {
  color: $title-on-black;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.2rem;
  margin-bottom: 0;
  padding: 0 12px;
}

.member__title {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1rem;
  padding: 0 1.5rem;
}

a.member__link {
  background: #D68D2C;
  color: #FFF;

  border-radius: 2px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  padding: 8px;
  text-align: center;
  text-decoration: none;
}

// FIX THE TOUCH METHOD
//.no-touch .team-grid__member:hover .member__info,
//.team-grid__member.cs-hover .member__info {
//  opacity: 1;
//}

.team-grid__member:hover .member__info {
  opacity: 1;
}


// ----- Middle Alignment Vertical ----- //
.member__info:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.center-vert-content {
  display: inline-block;
  vertical-align: middle;
}

/* end of current team member css */

这是我在 codepen 中调用 fullpage.js 的方式（我在实际文档中使用 document ready 和 function，但 codepen 喜欢这种方式）：

 $('#fullpage').fullpage({
          sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
          scrollBar: true

});

这是 fullpage.js 的链接：

https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js

还有一些与整页插件相关的 css 可能是相关的：

html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom {
    bottom: 17px;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
 }
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery css hover fullpage.js

【解决方案1】：

我无法使用您提供的链接在 Chrome 上重现您的问题。悬停图像根本没有任何作用。

看来您的问题可能与fitToSection:true 有关。尝试将其关闭。 )(选项fitToSection:false) 在任何情况下，如果你有比视口更大的部分，你应该使用scrollOverflow:true 和scrollBar:false。

否则，您唯一的解决方案是使用autoScrolling:false。

【讨论】：

你知道了！！！我正在使用 Chrome，所以我不确定为什么你不能重现它的行为，也许你没有滚动页面所以图像在顶部？无论如何：作为脚本的作者，您正确理解代码的哪一部分可以阻止这种情况。当我按照您的建议将“fitToSection”的设置更改为“false”时，行为停止。谢谢！！！！！！！！！！！！

【解决方案2】：

编辑：我很抱歉。我意识到来自 Alvaro 的 fitToSection:false 的答案实际上可以满足您的需求。我被以下事实误导了：将鼠标悬停在图像上与自动适合部分功能无关。

原文： 您所描述的问题似乎正是 fullPage.js 的目的。 Fullpage 移动滚动条，以便您看到的是它的有效部分之一。

在整页初始化程序中设置 autoScrolling: false 的作用完全不同。当 autoScrolling 设置为 true 时，鼠标滚轮的一次移动将向下或向上滚动整个部分。当它设置为 false 时，您的鼠标滚轮将正常移动，但在每种情况下，在您停止滚动 1 秒后，fullPage 会将窗口移动到正确的部分。

【讨论】：

我喜欢这个插件，因为我喜欢这个插件提供的动画滚动功能 1) 使用键盘或 2) 单击链接时。但是这种悬停效果正在破坏我的页面体验。我的实际团队成员部分要大得多（它有 15 人），并且与整页的悬停交互使您无法查看成员。当您将鼠标悬停在其中一个上以查看其详细信息时，它会滚动到下面的部分。让所有团队成员突然隐形。没有布埃诺。 :) 你有其他解决方案吗？