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

高洛峰
リリース: 2017-03-17 10:16:03
オリジナル
3352 人が閲覧しました

テーブルは 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート