javascript - 鼠标hover显示红色边框这种效果怎么实现

Question

谁做过这种效果
这是我写的，使用border-right:1px solid #eee;border-bottom:1px solid #eee；鼠标悬浮时ul li:hover{border-color:#ed9639;}怎么让左边也有一像素红框

Answer 1

看起来好像每个项题主都只有右边跟下边？

我感觉改成每个项都有左边跟下边，hover的时候再通过设置相邻元素的左边颜色如何？

示例：

*{
    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

是不是被左边的li挡住了的？最左边的有红边么？

Answer 5

border-left不行吗？

Answer 6

是不是你的选择器 权值太小被覆盖了

Answer 7

hover 的时候 要设置z-index。高于其它层级，这样你的边框才不会被覆盖

Answer 8

感谢大家的回答，我已经找到解决办法，分享给大家
http://www.jb51.net/css/14548...