CSS を使用してカーソルを合わせたときに表の行と列を強調表示する
この質問では、ユーザーは行と列の両方を強調表示することを目的としています。 HTML テーブル内にマウスを移動します。ハイライトを一方の軸からもう一方の軸まで拡張し、ホバーしたセルで交差するようにしたいと考えています。
CSS ソリューション
これは、目的を達成する純粋な CSS ソリューションです。効果:
table { border-spacing: 0; border-collapse: collapse; overflow: hidden; z-index: 1; } td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; } td:hover::before, .row:hover::before { background-color: #ffa; content: '<pre class="brush:php;toolbar:false"><table> <tr> <th></th> <th class="col">50kg</th> <th class="col">55kg</th> <th class="col">60kg</th> <th class="col">65kg</th> <th class="col">70kg</th> </tr> <tr> <th class="row">160cm</th> <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> </tr> <tr> <th class="row">165cm</th> <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> </tr> <tr> <th class="row">170cm</th> <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> </tr> <tr> <th class="row">175cm</th> <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> </tr> </table>
説明
この CSS は、擬似要素、絶対位置、Z インデックスの組み合わせを使用して、目的の効果を作成します。
HTML
対応する HTML マークアップは次のとおりです。
このマークアップでは、.row と . Col クラスは、通常の行や列と区別するためにテーブルのヘッダー要素に追加され、必要に応じて異なるスタイルを設定できるようになります。
このソリューションは、JavaScript や外部ライブラリを必要とせずに、ホバー時にテーブルの行と列を強調表示する柔軟なアプローチを提供します。
以上がCSSを使用してホバー時に表内の行と列を強調表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。