'CSS border solution

enter image description herei 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 class="wrapper">
        <div id="current" class="wrapper__square one"></div>
        <div class="wrapper__square two"></div>
        <div class="wrapper__square tree"></div>
        <div class="wrapper__square four"></div>
        <div class="wrapper__square five"></div>
        <div class="wrapper__square six"></div>
    </div>
</body>
<script src="script.js"></script>
</html>

Any solutions ?

css


Solution 1:[1]

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;
}

outline-offset is used 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 can prevent unwanted element shifting.

Solution 2:[2]

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 class="wrapper">
        <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 rusLaN L.

Related Questions