0
私はこのfiddleに見られるように、私のテーブルをスタイリングするための簡単なコードを持っています。私の問題はテーブルの頭の上に浮かんでいます。headの上にカーソルを置くと、rowのホバーで必要なスタイリングの一部になります。私は何も起こる必要はありませんが、下線が引かれました。テーブルヘッドは、テーブル行に割り当てられたホバーに応答していますか？
私のコードに間違いはありませんので、テーブルヘッドが行に割り当てられたhoverエフェクトに応答していますか？
<!DOCTYPE html>
<html>
<head>
<title>Table styling</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
table, th, td {
font-family: "Trebuchet MS", Arial, sans-serif;
}
caption {
font-size: 150%;
font-weight: bold;
margin: 5px;
}
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
tfoot td{
background: green;
color: white;
font-weight: bold;
}
tr:hover {
color: yellow;
background: orangered;
text-decoration: underline !important;
}
</style>
<body>
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">Total</td>
<td >4</td>
</tfoot>
</table>
</body>
</html>