html - 鼠标悬停在表格的偶数行上时，盒子阴影不可见

Question

我在 CSS 中遇到了一个问题，我有一个table并悬停在tr桌子上，一个 CSS 是为 box-shadow 编写的。问题是这个盒子阴影对于偶数行并不完全可见。

td由于下一个元素，box-shadow 的底部被隐藏了。它适用于奇数行。

这是问题的代码沙箱链接。

我尝试使用相对位置和 z-index 但这对我不起作用。有任何想法吗？

标签： htmlcss

Answer 1

使用drop-shadow代替box-shadow，例如：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:hover {
  filter: drop-shadow(0 0 0.275rem rgba(255, 0, 0, 0.75));
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

<h2>HTML Table</h2>

<h4>
  Onmouseover on the even row the box shadow is not completely visible
</h4>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>