如何使表格行可点击并通过在视觉上将其置于前面来突出显示它？

Question

我正在尝试创建具有以下两个功能的表：

1. 我在某些网站上看到的某种“带阴影的显眼”或“3d 效果”，感觉非常愉快。

2. 鼠标光标应该有一个“手”图标，表明该行是可点击的。

每当用户将鼠标悬停在表格的行上时，我都需要显示这些功能。我尝试使用 Bootstrap 4 的 table-hover 类的功能，但无法实现这两个功能中的任何一个。

对于第一个功能，我想为悬停的<tr> 添加一个带阴影的类。但是，不知道这是否是最好的方法。 是否有一些已经定义的类可以实现这种行为？

对于第二个功能，我不知道。有什么建议吗？

这是我的代码：

<div class="container">
<div class="table-wrapper">
  <table class="table">
    <thead id="thead_st" class="thead">
      <tr>
        <th class="thead-row" scope="col"></th>
        <th class="thead-row" scope="col">1</th>
        <th class="thead-row" scope="col">2</th>
        <th class="thead-row" scope="col">3</th>
        <th class="thead-row" scope="col">4</th>
        <th class="thead-row" scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="trow">
        <th scope="row"></th>
        <td class="score">4.7</td>
        <td>Bla bla</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

CSS：

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.container {
   margin-top: 50px;
   margin-bottom: 50px;
   background: white;
   border-radius: 8px;
   padding: 0px;
}

body {
   background: #ECEEF1;
   font-family: 'Roboto', sans-serif;
   color: #2C3A56;
}

tr {
  font-size: 16.5px;
  line-height: 50px;
  padding: 0px;
  font-weight: 100;
}

td, th {
  display: table-cell;
  text-align: center;
}

#thead_st {
  background-color: #F6CE52;
  border: 3px solid #F6CE52;
  color: white;
}

.thead-row {
    line-height: 20px;
    font-weight: 100;
}


.trow:hover {
   cursor:pointer; //set the cursor to pointer (hand)
   background-color: blue; //sets hovered row's background color to blue
   box-shadow: 5px 10px #888888;
}

Answer 1

请检查下面的小提琴。您的两个要求已完成。

1. 我在一些网站上看到了某种“带阴影的显眼效果”或“3d 效果”，感觉非常愉快。
2. 鼠标光标应该有一个“手”图标，表明该行是可点击的。

Fiddle

.trow
{
   transition: transform .2s;
}

.trow:hover {
   cursor:pointer; 
   transform: scale(1.03);
   background:#ccc;
   color:#fff;
}

Answer 2

在 css 中，假设您的 <tr> 具有 .row 类：

.row:hover{
   cursor:pointer; //set the cursor to pointer (hand)
   background-color:blue; //sets hovered row's background color to blue
   box-shadow: 5px 10px #888888; //this is a box shadowing effect that you can tweak at your choice.
}

如果您只想制作“3D”效果，您可以使用<tr> 元素的width 和height 属性，使其在hover 事件中比其他元素更大。

当我以前玩 3D 效果时，我通常会实现 2D Transforms 来调整平移属性的位置。