Css 如果在上面添加了 html，codepen 的悬停会变得疯狂

Question

我发现了一个用于显示团队成员的很棒的代码笔。问题是，当您在其上方添加 html 时，悬停效果会变得异常。当你悬停在一个人身上时，你应该只获得悬停效果（这正是原始代码笔中发生的事情：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 时，（就像悬停下方的两个 div）行为中断。

<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>

在我将我的小 div 添加到花哨的 codepen 东西之上之后，当您将鼠标悬停在新的、前面的白色区域上时，页面会提供信息，而不是当您将鼠标悬停在团队成员上时。这是显示损坏版本的codepen，前面有一点html：http://codepen.io/ihatecoding/pen/zqqyVj .

到底为什么会发生这种情况，我该如何解决？

Answer 1

问题出在您的 .member-info class...使用 chrome 开发人员工具可以轻松调试此问题。

代码笔：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;
}

Css 如果在上面添加了 html，codepen 的悬停会变得疯狂

Css hover from codepen goes berzerk if html is added above

html

javascript

css

hover