CSS border solution-CodePudding

i got a simple code, few blocks with red border. I need change border color on hover for example on blue, but border on all blocks must be 1px. Blocks cant move, cant be more than 150px height and width. Red border cant be under the blue one. So as the result on hover we must see block w150px h150px border only blue, no move, no any change. Can some1 help ?

* {
    box-sizing: border-box;
}
.wrapper    {
    display: flex;
    flex-wrap: wrap;
    max-width: 450px;
    width: 100%;
 }   
 .wrapper__square {
        flex: 0 0 150px;
        width: 150px;
        height: 150px;
        border: 1px solid red;
}
.wrapper__square:hover {
         border: 1px solid blue;
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div >
        <div id="current" ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</body>
<script src="script.js"></script>
</html>

Any solutions ?

CodePudding user response：

You could instead use outline to imitate the effect of a border:

.wrapper__square {
   outline-color: red;
   outline-width: 1px;
   outline-style: solid;
   outline-offset: -1px;
}

.wrapper__square:hover {
   outline-color: blue;
}

I used outline-offset to move the outline so that it is contained within the element.

The above implementation imitates a border, but it will be located on the inside of the div. Also, another bonus about outline is that unlike border, the outline can overlap with other content, which is another plus.

CodePudding user response：

okey, finally i got acceptable result. Can't make it by foreign methods, but work fine.

* {
    box-sizing: border-box;
}
.wrapper    {
    border-collapse: collapse;
}
.wrapper td {
        position: relative;
        width: 150px;
        height: 150px;
        border: 1px solid red;
}       
.wrapper td:hover:after{
                position: absolute;
                top: -1px;
                left: -1px;
                width: 100%;
                height: 100%;
                content: '';
                border: 1px solid blue; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <table >
        <tr class=wrapepr__row>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class=wrapepr__row>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
<script src="script.js"></script>
</html>