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

问题描述

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

问题解答

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

我感觉改成每个项都有左边跟下边，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

ul li:hover{ border: 1px solid #ed9639;}回答3：

box-shadow

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

border-left不行吗？

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

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

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