Why is css hover interacting with javascript (fullpage.js) and how can I stop it?
<p>I am using two plugins, a jquery and css based page scroller called fullpage.js, and a css hover effect that are interacting in an undesirable way. <strong>If the user hovers over one of the images that has the css effect, it somehow triggers the page scroller to activate and move the page.</strong> I do not want this to happen and would like to stop it.  Here is the codepen: <a href="http://codepen.io/ihatecoding/pen/pyEbqY" rel="nofollow">http://codepen.io/ihatecoding/pen/pyEbqY</a></p>

<p>I don't know enough about css and javascript to understand why. I have looked at the fullpage.js options, and I couldn't find anything that seemed to work - changing  "autoscrolling" to false didn't help. It may be that the problem is just due to the css of the two plugins interacting, and javascript may not be causing the interaction.</p>

<p>To reproduce the unwanted autoscrolling,  </p>

<p>1) scroll so the images in the first section (the team members in "Section 1") are at the top of the page, and half obscured by the top of the window.<br>
2) Hover over one of the team member images, you should see the page move down.  </p>

<p>The divs that appear upon hover and which I believe trigger the unwanted scrolling seem to be of class .member__info. </p>

<p>This is the css code for the plugin I used for the hover effect. </p>

<pre><code>/* 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;

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

  &amp;: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 */
</code></pre>

<p>This is the way I call fullpage.js in my codepen (I use document ready and function in the actual document, but codepen likes it this way):</p>

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

});
</code></pre>

<p>This is the link to fullpage.js:</p>

<p><a href="https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js" rel="nofollow">https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js</a></p>

<p>There is also some css associated with the fullpage plugin that might be relevant:</p>

<pre><code>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&lt;=5 Android&lt;=3 */
    -moz-box-sizing: border-box; /* &lt;=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&lt;=6 Android&lt;=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;
}
</code></pre>

<p>Any help would be appreciated!</p>