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

淡淡烟草味    2017-07-05 11:06:458楼

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

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

 赞 +0添加回复

仅有的幸福    2017-07-05 11:06:457楼

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

 赞 +0添加回复

学习ing    2017-07-05 11:06:456楼

box-shadow

 赞 +0添加回复

欧阳克    2017-07-05 11:06:455楼

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

 赞 +0添加回复

習慣沉默    2017-07-05 11:06:454楼

border-left不行吗？

 赞 +0添加回复

扔个三星炸死你    2017-07-05 11:06:453楼

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

 赞 +0添加回复

过去多啦不再A梦    2017-07-05 11:06:452楼

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

 赞 +0添加回复

伊谢尔伦    2017-07-05 11:06:451楼

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

 赞 +0添加回复