请教个简单的css的边框问题

想要做出图一效果，鼠标放在某个选项上，底色变成灰色，但是实际我做出了，因为右边需要有条黑色的细线。这个要怎么弄

边框不要给到外面的div 4个菜单分4个div 它们都设置右边框

之后利用jq控制 选中的变色 变背景 去掉有边框
这样说不知道你能不能懂

补充下这个问题，我之前在外面的div加了 border-right: 6px solid black; 然后鼠标移动选项时用

 .classify input:hover{
    background:#E7ECEE;color:#2477ae;

}

把灰色的那个宽度缩短5px，border-right: 5px solid #000000；

.classify input:hover{
background:#E7ECEE;color:#2477ae;border-right: 0px;

}

或者
.classify input:hover{
background:#E7ECEE;color:#2477ae;border: none;

}
方法太多了

最好贴你结构出来，不知道结构不好帮你弄，而且你要的是第一张图片还第二张的效果？描述不清楚，第二张的同时设置hover时border-right颜色为黑色

 .classify input:hover{
    background:#E7ECEE;color:#2477ae;border-right:border:solid 6px #000

}