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

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

http://runjs.cn/detail/ibxy9qab

这篇关于javascript - 鼠标hover显示红色边框这种效果怎么实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！