javascript - How to achieve the effect of displaying a red border on mouse hover

Question

Who has done this effect?
This is what I wrote, using border-right:1px solid #eee;border-bottom:1px solid #eee; when the mouse is hovering ul li:hover{border-color:# ed9639;}How to make a pixel red frame on the left side

Answer 1

It seems like each item title has only the right and bottom?

I think it would be better to change each item to have a left side and a bottom side. How about setting the left side color of adjacent elements when hovering?

Example:

*{
    box-sizing:border-box;
}
.wrap{
    width:300px;
    
}
.item{
    width:75px;
    float:left;
    text-align:center;
    border:1px solid #eee;
    border-right-width:0;
}
.item:last-child{
    border-right-width:1px;
}

.item:hover{
    border-left-color:red;
    border-bottom-color:yellow;
}
.item:hover + .item{
    border-left:1px solid yellow;
}
.item:last-child:hover{
    border-right:1px solid yellow;
}

<p class="wrap">
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
</p>

http://runjs.cn/detail/ibxy9qab

Answer 2

ul li:hover{
  border: 1px solid #ed9639;
}

Answer 3

box-shadow

Answer 4

Is it blocked by the li on the left? Does the one on the far left have a red edge?

Answer 5

Border-left doesn’t work?

Answer 6

Is it because the weight of your selector is too small and is overwritten?

Answer 7

When hovering, z-index needs to be set. Higher than other levels so that your borders are not covered

Answer 8

Thank you for your answers, I have found a solution and share it with you
http://www.jb51.net/css/14548...