表上でマウスを移動してセルの境界線の色を変更する方法

テーブルは border-collapse:collapse; を定義しており、境界線は 1 つの境界線にマージされます。 border-spacing プロパティと empty-cells プロパティは無視されます。

td:hoverを使うと表示が不完全です

ずっと探したのですが良い方法が見つからず、左右の境界線も完璧ではありません。

そこで、絶対配置を使用して、上に移動するときに後に疑似要素を追加することを考えていました。

定義と使用法

:after疑似要素は、要素の後にコンテンツを追加します。

この疑似要素を使用すると、作成者は要素のコンテンツの最後に生成されたコンテンツを挿入できます。デフォルトでは、この疑似要素はインラインですが、これは display 属性を使用して変更できます。

注: Internet Explorer 8 (以降) は、!DOCTYPE が指定されている場合、content 属性をサポートします。

nbsp;html><meta><title>border-hover</title><style>.w1000{width:1000px;margin:0 auto;}.table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;}.table tr th{border: 1px solid #d9dbda;padding:5px 0;}.table tr td{border: 1px solid #d9dbda;}.height2{height:61px;line-height:61px;}.height1{height:30px;line-height:30px;}.table tr td:hover .list-p{position:relative;}.table tr td:hover .list-p:after{
    content: "";
    height: 100%;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 100%;
    z-index: 100;}.table tr td.list01-td:hover .list-p:after{
    border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
    border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
    border: 1px solid #ff9600;}</style>
    <p>
        </p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

周一	周二	周三	周四	周五	周六	周日
星期	星期
星期
	星期

    

表示:

リマインダー:

1. 行を単純に結合する場合、高さを追加する必要はありません。

以上が表上でマウスを移動してセルの境界線の色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。