文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在表的偶数行上的鼠标覆盖上，框影不可见。

问在表的偶数行上的鼠标覆盖上，框影不可见。
EN

Stack Overflow用户
提问于 2020-09-22 10:24:44
回答 3查看 210关注 0票数 1

我在CSS中面临一个问题，我有一个table并在表的tr上盘旋，一个CSS是为框影编写的。问题是这个框影对于偶数行不是完全可见的。

​

​

由于下一个td元素，框影的底部正在隐藏。它能处理一些奇怪的行。

下面是问题的代码沙箱链接。

我试过用位置相对和z指数，但这对我不起作用。有什么想法吗？

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-09-22 11:28:53

例如，使用drop-shadow而不是box-shadow：

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2020-09-22 10:59:32

请试试这个，

第一方法

将position:relative添加到tr:将{.}与z-index:2悬停。还将position:relative添加到td{.} z-index:1中。

，那是

代码语言：javascript
复制
tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
  z-index:2;
}
tr td{
  position: relative;
  z-index:1;
}

现场演示

代码语言：javascript
复制
tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
  z-index:2;
}
tr td{
  position: relative;
  z-index:1;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

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

      tr:hover {
        box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

​

第二种方法

使用box-shadow作为嵌入

代码语言：javascript
复制
  box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);

​

代码语言：javascript
复制
tr:hover {
  box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

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

      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2020-09-22 11:07:23

移除此样式

代码语言：javascript
复制
tr:nth-child(even) {
    background-color: #dddddd;
 }

如果您移除此样式，它将工作。

​

代码语言：javascript
复制
table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td,
      th {
        text-align: left;
        padding: 8px;
      }

      tr:hover {
        box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
        position: relative;
      }

tr:nth-child(even) {
    background-color: #dddddd;
 }
      tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
}
table {
  border-collapse: separate;
    border-spacing: 0px 8px;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <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>
  </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64007773

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档