Comment changer la couleur de la bordure des cellules en déplaçant la souris sur le tableau

Le tableau définit border-collapse:collapse ; les bordures seront fusionnées en une seule bordure. Les attributs border-spacing et empty-cells sont ignorés.

Utilisez td:hover, l'affichage est incomplet

J'ai cherché longtemps, mais je n'ai pas trouvé de bonne méthode, et la gauche et les frontières droites ne sont pas parfaites non plus.

Je pensais donc ajouter un pseudo élément après en le remontant, avec un positionnement absolu.

Définition et utilisation

 : après le pseudo-élément ajoute du contenu après l'élément.

Ce pseudo-élément permet aux créateurs d'insérer du contenu généré à la fin du contenu de l'élément. Par défaut, ce pseudo-élément est en ligne, mais cela peut être modifié à l'aide de l'attribut display.

Remarque : Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut content si !DOCTYPE est spécifié.

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>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

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

    

Affichage :

Rappel :

1. Je n'ai pas fusionné de colonnes lorsque j'ai commencé à le faire. La fusion de lignes est simple et vous n'avez pas besoin d'ajouter de la hauteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!