看bootstrap源码还是可以学到很多知识啊。
实现效果
鼠标hover的时候,有个border,并且会在蓝色三角形中打钩,纯css实现,但是在ie7及以下不支持。
.box li:hover {outline: 1px solid #0cf}
.box li:after {
position: absolute;
display: block;
border-top: 28px solid #4390df; //三角形设置
border-left: 28px solid transparent;
right: 0; //位置设置。记得li要设置相对定位
top: 0;
content: "";
z-index: 101;
}
.box li:hover:before { //打钩实现,当这里设置为after时,则上面要换成before
position: absolute;
display: block;
content: "√";
color: #fff;
font-size: 20px;
right: 0;top: 0;
z-index: 102;
}