Css hover from codepen идет berzerk, если html добавлен выше

Question

Я нашел отличный код для отображения членов команды. Проблема, когда вы добавляете html над ним, эффекты зависания идут berzerk. Вы должны получить только парить эффекты при наведении курсора мыши на человека (который является именно то, что происходит в исходном коде пера: http://codepen.io/solutiondrop/pen/IqKhk)

<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

<div class="wrapper--team"> 
<div class="l-container"> 

    <div class="team-grid"> 

    <div class="team-grid__member hover"> 
     <div class="member__info"> 
     <div class="center-vert-content"> 
      <h3 class="member__name">Robert Finkel</h3> 
      <p class="member__title">Rootmaster</p> 
      <a class="member__link" href="javascript:void(0)">Read More</a> 
     </div> 
     </div> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/robert-finkel_2.jpg" alt="Robert Finkel"> 
    </div> 

    <div class="team-grid__member hover"> 
     <div class="member__info"> 
     <div class="center-vert-content"> 
      <h3 class="member__name">Randy Mosher</h3> 
      <p class="member__title">Alchemist</p> 
      <a class="member__link" href="javascript:void(0)">Read More</a> 
     </div> 
     </div> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/randy-mosher.jpg" alt="Randy Mosher"> 
    </div> 

    <div class="team-grid__member hover"> 
     <div class="member__info"> 
     <div class="center-vert-content"> 
      <h3 class="member__name">BJ Pichman</h3> 
      <p class="member__title">Operations Manager</p> 
      <a class="member__link" href="javascript:void(0)">Read More</a> 
     </div> 
     </div> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/mrch8596.jpg" alt="BJ Pichman"> 
    </div> 

    <div class="team-grid__member hover"> 
     <div class="member__info"> 
     <div class="center-vert-content"> 
      <h3 class="member__name">Jacqueline Armanetti</h3> 
      <p class="member__title">Brand Ambassador</p> 
      <a class="member__link" href="javascript:void(0)">Read More</a> 
     </div> 
     </div> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/jacqueline-armanetti.jpg" alt="Jacqueline Armanetti"> 
    </div> 

    <div class="team-grid__member hover"> 
     <div class="member__info"> 
     <div class="center-vert-content"> 
      <h3 class="member__name">Romy Seth</h3> 
      <p class="member__title">Analyst</p> 
      <a class="member__link" href="javascript:void(0)">Read More</a> 
     </div> 
     </div> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/romy-seth.jpg" alt="Romy Seth"> 
    </div> 

    </div> 

</div> 
</div> 

Однако, когда я добавить немного HTML выше исходного HTML в моей собственной реализации, (например, два divs ниже зависания).

<div></div> 
<div><span><br>if you hover on this text on the white region over the images, 
weird stuff happens. <br>The javascript should only be triggered if you hover over a person (scroll down to see)</span> 
</div> 

После того как я добавить свои маленькие дивы над фантазией codepen вещи, страница предоставляет информацию при наведении на новом, предшествующем бело-область, а при наведении курсора мыши на члене команды. Вот код, показывающий сломанную версию, с небольшим количеством предыдущего html: http://codepen.io/ihatecoding/pen/zqqyVj.

Почему это возможно и как это исправить?

Answer 1

Проблема с вашим классом .member-info ... Используйте инструменты для обработки хрома, чтобы легко отладить эту проблему.

CodePen: http://codepen.io/anon/pen/wGGNmd#0

Ваш CSS:

.member__info { 
    color: #fff; 
    height: auto; 
    width: auto; 
    opacity: 0; 
    position: absolute; 
    top: 1rem; 
    left: 1rem; 
    right: 1rem; 
    bottom: 1rem; 
    background: rgba(0, 0, 0, 0.85); 

    backface-visibility: hidden; 
    transition: opacity 0.4s ease-in-out; 
} 

моя рекомендация:

.member__info { 
    color: #fff; 
    height: 184px; 
    width: 184px; 
    position: absolute; 
    opacity: 0; 
    background: rgba(0, 0, 0, 0.85); 
    backface-visibility: hidden; 
    transition: opacity 0.4s ease-in-out; 
}