See the Pen ZYgRzW by Tsukasa Nagata (@nt-uni) on CodePen.0
今回は上記のようなCSSだけでテーブルの縦横ラインをハイライトするCSSをご紹介します。
CSS
table {
overflow: hidden;
}
tr:hover {
background-color: #ffa;
}
td, th {
position: relative;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
ざっと見て行きましょう。
tr:hover {
background-color: #ffa;
}
ここで横列がハイライトうけるのはOKですね。
td:hover::after,
th:hover::after {
ほにゃらら
}
ちなみに::after
とコロンを重ねるのはCSS3構文となり、擬似クラスと擬似要素の見分けをはっきりさせるために導入されました
:hover::after
では、高さが10000px
の要素をtop: -5000px
にもっていき、なが~いbackground-color
を引くわけです。そしてz-index: -1
で後ろにもっていきます。
そのままだとはみ出してしまうため、
table {
overflow: hidden;
}
となっているわけです。
まとめ
簡単なCSSなので解説もあまり必要ありませんでしたね。
それよりも途中の解説文でCSS構文が文章の間に間に入ってきたため、なんだかルー語みたいになってしまいました。
失礼。
参考サイト:
Simple CSS-Only Row and Column Highlighting | CSS-Tricks
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事