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; how to make the left side ul li:hover{border-color:#ed9639;} when the mouse is hovering There is also a pixel red frame

淡淡烟草味 · Answer

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


    

        hello
    
    
        hello
    
    
        hello
    
    
        hello

http://runjs.cn/detail/ibxy9qab

仅有的幸福 · Answer

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

学习ing · Answer

<p>box-shadow</p>

欧阳克 · Answer

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

習慣沉默 · Answer

Border-left doesn’t work?

扔个三星炸死你 · Answer

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

过去多啦不再A梦 · Answer

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

伊谢尔伦 · Answer

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