How to change the cell border color by moving the mouse over the table

The table defines border-collapse:collapse; The borders will be merged into a single border. The border-spacing and empty-cells properties are ignored.

Use td:hover, incomplete display

After searching for a long time, I didn’t find a good method, and using left and right borders is not perfect either.

So I was thinking about adding a pseudo element after when moving it up, with absolute positioning.

Definition and usage

:after pseudo-element adds content after the element.

This pseudo-element allows creators to insert generated content at the end of the element's content. By default, this pseudo-element is inline, but this can be changed using the attribute display.

Note: Internet Explorer 8 (and later) supports the content attribute if !DOCTYPE is specified.

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>

Display:

Reminder:

1. I didn’t merge columns when I started doing it. Merging rows is simpler and you don’t need to add height.

The above is the detailed content of How to change the cell border color by moving the mouse over the table. For more information, please follow other related articles on the PHP Chinese website!