时间戳

首页 > 解决方案 > 检查与页面加载不同的元素悬停行为

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

问题描述

我正在使用 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 中的元素并选择“悬停”，我可以看到悬停正常工作（背景变为红色）。但是当我只是加载网页时它不起作用。

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

标签： htmlcsshover

解决方案

你可以删除position: relative;

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

比悬停更有效

消除position:relative;

这就是为什么悬停不工作和光标首先得到身体。

我认为这很有帮助。

推荐阅读