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

Question

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

我对 css 和 javascript 的了解还不够，无法理解为什么。我查看了 fullpage.js 选项，但找不到任何似乎有效的选项 - 将“autoscrolling”更改为 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;
}

如有任何帮助，我们将不胜感激!

Answer 1

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

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

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