ホバー上のテーブル（tr）の左側にいくつかのシェイプを追加しようとしています。そのような 何か：シェイプオンホバーオン<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;
}
あなたが境界線を追加TD番目.border:hover th:first-childホバー変更を使用することができます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;
\t -webkit-border-radius: 10px;
\t -moz-border-radius: 10px;
\t border-radius: 10px;
\t 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
{
\t 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%;
\t heightv: 60px;
\t -webkit-border-radius: 10px 10px 0 0;
\t -moz-border-radius: 10px 10px 0 0;
\t border-radius: 10px 10px 0 0;
\t 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 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Person <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Last updated <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Date <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Learning objects <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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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>を使用。あなたの例では
、あなたは基本的にテーブルレイアウトを破ると、予期しない結果になりますテーブルの行、前にコンテンツを追加し::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;
\t -webkit-border-radius: 10px;
\t -moz-border-radius: 10px;
\t border-radius: 10px;
\t background-color: #23a298;
padding: 10px 30px;
text-align: center;
text-decoration: none;
border: none;
cursor: pointer;
}
#content button:focus {outline:0;}
#content button:hover
{
\t 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%;
\t heightv: 60px;
\t -webkit-border-radius: 10px 10px 0 0;
\t -moz-border-radius: 10px 10px 0 0;
\t border-radius: 10px 10px 0 0;
\t 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 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Person <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Last updated <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Date <i class="fa fa-chevron-down" aria-hidden="true"></i></a></th>
<th><a href="#">Learning objects <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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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>チェックこの更新されたコードを：後https://jsfiddle.net/yw8tp5kL/4/ がコードしているあなたがする必要がある変更：
table {
width: 100%;
border-collapse:collapse;
}
table tr:hover {
background-color: #f9fcfc;
border-left:4px solid lightgreen;
}
パーフェクト！ありがとうございました – Nedvid