<tr> 中悬停时的形状

Posted

技术标签:

【中文标题】<tr> 中悬停时的形状【英文标题】：Shape on hover in <tr> 【发布时间】：2018-02-13 15:41:43 【问题描述】：

我正在尝试在悬停时在表格 (tr) 的左侧添加一些形状。 类似的东西：

这是我的 CSS：

table tr:hover:after 
    content: "";
    position: relative;
    width: 4px;
    height: 50px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    background-color: #23a298;
    top: 0px;

现在，我的桌子只是疯狂地移动，没有形状。哪里有问题？ 更多代码：https://jsfiddle.net/yw8tp5kL/

【问题讨论】：

【参考方案1】：

使用table white-space: nowrap;

* 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;
  text-decoration:none;


button

  float: right;
  display: inline-block;
  decoration: none;
  font-size: 15px;
  font-weight: 600;
  margin-left: 30px;
  color: #fff;
  height: 50px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #23a298;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  height:25px;


#content button:focus outline:0;

#content button:hover


	background-color: #22dccd;
  -webkit-transition:  0.4s ease-out;
  -moz-transition:  0.4s ease-out;
  -o-transition:  0.4s ease-out;
  -ms-transition: r 0.4s ease-out;
  transition:  0.4s ease-out;

  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);


table 
  width: 100%;
    white-space: nowrap;


tr:first-of-type 
  text-align: left;
  width: 100%;
	heightv: 60px;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	background-color: #f4fafa;
  line-height:65px;


tr:first-of-type a
    padding-left: 30px;
    color: #6c6c6c;
    font-size: 15px;
    font-weight:600;


tr:first-of-type:hover 
    background-color: #f4fafa;


tr a:hover 
  color: #23a298;
  -webkit-transition: 0.4s ease-out;
  -moz-transition:  0.4s ease-out;
  -o-transition:  0.4s ease-out;
  -ms-transition:  0.4s ease-out;
  transition:  0.4s ease-out;


table tr td:first-child:hover 

  border-left:3px solid #23a298


table tr.border td 
  border-bottom: 2pt solid #f6f7fb;


table td 
  color: #222222;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;


table tr:hover 
  background-color: #f9fcfc;


table tr:hover:after 
    content: "";
    position: relative;
    width: 4px;
    height: 50px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    background-color: #23a298;
    top: 0px;


table td:first-child 
  font-weight: 600;
  color: #23a298;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<table style="width: 100%">
              <colgroup>
                 <col span="1" style="width: 23%;">
                 <col span="1" style="width: 22%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 10%;">
              </colgroup>
              <tbody>
                <tr class="border">
                  <th><a href="#">Name &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Person &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Last updated &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Date &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Learning objects &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">More</a></th>
                </tr>
                <tr class="border">
                  <td><a href="#">Das Ist Deutch KOMPAKT 7</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>138</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">201-2</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>123</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">All Clear</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>212</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">All Audioteka</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>156</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Brainy</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>125</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Bugs Team 1</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>136</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">FNAIM</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>25</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Hello Explorer</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>75</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">ICC 101</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>83</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">ICC 101-12</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>256</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
              </tbody>
          </table>

【讨论】：

完美！谢谢【参考方案2】：

在此处查看更新后的代码：https://jsfiddle.net/yw8tp5kL/4/ 以下是您需要做的代码更改：

table 
  width: 100%;
  border-collapse:collapse;


table tr:hover 
  background-color: #f9fcfc;
  border-left:4px solid lightgreen;

【讨论】：

【参考方案3】：

在您的示例中，您使用 ::before 伪元素在表格行之前添加内容，这实际上会破坏表格布局并导致不可预测的结果。

所以，当您将鼠标悬停在行的第一个单元格上时，我修改了您的代码并添加了伪元素。我还添加了相对和绝对定位，以将边框完美地定位在第一个单元格的最左角。

* 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;


button

  float: right;
  display: inline-block;
  decoration: none;
  font-size: 15px;
  font-weight: 600;
  margin-left: 30px;
  color: #fff;
  height: 50px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #23a298;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;


#content button:focus outline:0;

#content button:hover


	background-color: #22dccd;
  -webkit-transition:  0.4s ease-out;
  -moz-transition:  0.4s ease-out;
  -o-transition:  0.4s ease-out;
  -ms-transition: r 0.4s ease-out;
  transition:  0.4s ease-out;

  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);


table 
  width: 100%;


tr:first-of-type 
  text-align: left;
  width: 100%;
	heightv: 60px;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	background-color: #f4fafa;
  line-height:65px;


tr:first-of-type a
    padding-left: 30px;
    color: #6c6c6c;
    font-size: 15px;
    font-weight:600;


tr:first-of-type:hover 
    background-color: #f4fafa;


tr a:hover 
  color: #23a298;
  -webkit-transition: 0.4s ease-out;
  -moz-transition:  0.4s ease-out;
  -o-transition:  0.4s ease-out;
  -ms-transition:  0.4s ease-out;
  transition:  0.4s ease-out;


table tr 
  width: 100%;
  height: 70px;
  line-height:65px;


table tr.border td 
  border-bottom: 2pt solid #f6f7fb;


table td 
  color: #222222;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  position: relative;


table tr:hover 
  background-color: #f9fcfc;


table tr:hover>td:first-child:before 
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    background-color: #23a298;
    top: 0px;
    left: 0;


table td:first-child 
  font-weight: 600;
  color: #23a298;

<table style="width: 100%">
              <colgroup>
                 <col span="1" style="width: 23%;">
                 <col span="1" style="width: 22%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 15%;">
                 <col span="1" style="width: 10%;">
              </colgroup>
              <tbody>
                <tr class="border">
                  <th><a href="#">Name &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Person &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Last updated &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Date &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">Learning objects &nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
                  <th><a href="#">More</a></th>
                </tr>
                <tr class="border">
                  <td><a href="#">Das Ist Deutch KOMPAKT 7</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>138</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">201-2</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>123</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">All Clear</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>212</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">All Audioteka</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>156</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Brainy</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>125</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Bugs Team 1</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>136</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">FNAIM</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>25</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">Hello Explorer</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;apiecuch@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>75</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">ICC 101</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;mjakubek@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>83</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
                <tr class="border">
                  <td><a href="#">ICC 101-12</a></td>
                  <td><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;admin@n-educatio.com</a></td>
                  <td>2016/05/09 10:56</td>
                  <td>2016/05/09 10:56</td>
                  <td>256</td>
                  <td><button class="ver2"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
                </tr>
              </tbody>
          </table>

【讨论】：

【参考方案4】：

您可以使用.border:hover th:first-child hover 更改 td 添加边框。

https://jsfiddle.net/yw8tp5kL/3/

【讨论】：

以上是关于<tr> 中悬停时的形状的主要内容，如果未能解决你的问题，请参考以下文章

如何在导航栏中更改a：hover的形状？

使用 KineticJS 在鼠标悬停时重新着色形状

css中那种两边带箭头的鼠标形状和成45度的两边带箭头的鼠标形状分别是啥代码？

在侧边栏导航中更改自定义形状的悬停样式

Css：菜单悬停创建自定义形状背景图像？（使用css的平行四边形）

如何设置悬停效果（注意：只有方形边框在悬停时应该像钻石形状一样旋转，而不是图像）[关闭]