javascript - 如果上面添加了 html，则来自 codepen 的 Css hover 会变得异常

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 东西之上之后，页面会在您将鼠标悬停在新的、前面的白色区域上时提供信息，而不是当您将鼠标悬停在团队成员上时。这是显示损坏版本的代码笔，前面有一点 html:http://codepen.io/ihatecoding/pen/zqqyVj .

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

Answer 1

问题出在您的 .member-info 类上...使用 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;
}