检查与页面加载不同的元素悬停行为

Question

我正在使用 HTML 表格来尝试实现这一目标：

https://i.stack.imgur.com/Saggs.png

这是我的代码：

.i-am-a-content {
  margin-left: 10%;
  margin-right: 10%;
}

.buttons {
  width: 30%;
  background-color: #2e2e2e;
  border-collapse: separate;
}

.buttons p {
  text-align: center;
  margin-top: 0px;
}

td:hover {
  background-color: red;
  border-collapse: separate;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  text-align: center;
  border: 0px solid transparent;
  background-clip: padding-box;
  padding-right: 40px;
  padding-left: 40px;
}

tr>td+td {
  border-left-width: 60px;
}

tr+tr>td {
  border-top-width: 20px;
}

td p {
  color: #2e2e2e;
}

.i-am-text {
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=80)/* For IE8 and earlier */
  vertical-align: center;
}

div.i-am-text p {
  color: #2e2e2e;
  vertical-align: center;
  z-index: 1;
}

<div class=i-am-a-content>

  <table>
    <tr>
      <td class="buttons">
        <h3>Button 1
          <h3>
      </td>
      <td class="i-am-text" rowspan="3">
        <p>Lorem ipsum dolor sit amet, mea id quodsi efficiendi, sed eirmod salutatus at. Partem eruditi detraxit et mei. At mea modo laboramus sententiae. Alia autem ei est, meliore recusabo ocurreret cu sea. Sit in euismod volumus appareat, epicurei adipisci
          electram mei at. No affert patrioque maiestatis vim.Nec assum senserit in, eu pri detracto mandamus. Etiam consequat definitiones ut eum, admodum iracundia vix te. Cu est vivendo definitionem, meliore invenire eam no, harum definitionem conclusionemque
          vix te. Te possim torquatos vulputate vim, deleniti hendrerit an ius. Cu nam vero iudico conclusionemque. Dolorem gloriatur usu ne, agam consul reprimique te vix, quando aliquid scaevola nam no.Id rebum nemore alterum est. Mollis pertinacia
          vel at, posse movet officiis nec te. Nec cu ullum principes, pro ei homero option graecis. Libris graeci et sed, sea ei hendrerit efficiantur, sit ex accusam fabellas. Duo ut aliquam patrioque democritum.</p>
      </td>
    </tr>
    <tr>
      <td class="buttons">
        <h3>Button 2</h3>
      </td>
    </tr>
    <tr>
      <td class="buttons">
        <h3>Button 3</h3>
      </td>
    </tr>
  </table>
</div>

一切正常。

但是，在我的浏览器 (Chrome) 中，我也在 E​​dge 中进行了测试，悬停不起作用。如果我检查 Chrome 中的元素并选择“悬停”，我可以看到悬停正常工作（背景变为红色）。但是当我只是加载网页时它不起作用。

是否有人对为什么该行为在检查元素中有效但在现实中无效的原因有什么建议？

Answer 1

你可以删除position: relative;

.i-am-a-bg {
    background-color: #c7c7c7;
    /* position: relative; */
}

比悬停更有效

删除position:relative;

这就是为什么悬停不工作和光标首先出现在身体上。

我认为这很有帮助。

Answer 2

移除 z-index 会恢复悬停效果。但是，您已将其用于块的可见性，就像您将位置用于间距一样。

无需单独使用位置和顶部作为间距。如果 position: relative 有其他用途，可以保留，否则请移除并使用边距。

添加边距而不是顶部，因此，z-index 和顶部在下面注释，请从您的代码中删除它们。

.i-am-a-bg {
     background-color: #c7c7c7;
     position: relative;
     /* top: -180px; */
     /* z-index: -1; */
     /* padding-top: 250px; */
     padding-bottom: 180px;
     margin-bottom: 180px;
     margin-top: 70px; }