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）中，并且我也在Edge中进行了测试，该鼠标悬停不起作用。如果我检查Chrome中的元素并选择“悬停”，则可以看到悬停工作正常（背景更改为红色）。但是当我只加载网页时它不起作用。

有人对行为为何在检查元素中起作用但在现实中不起作用有任何建议吗？

Answer 1

您可以删除position: relative;

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

悬停工作

删除position:relative;

为什么鼠标悬停不起作用＆光标首先对准主体。

我认为这很有帮助。

Answer 2

删除z-index会恢复悬浮效果。但是，您已将其用于块的可见性，因为已将位置用于间隔。

无需单独使用位置和顶部作为间距。如果位置还有其他用途：相对，则可以保留，否则请移除该位置，并使用边距作为此间距。

添加了边距而不是顶部，因此，下面注释了z-index和top，请从代码中将其删除。

.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; }

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

2 个答案: