css鼠标放上去显示外框

来源:互联网 发布:阿里云rds数据库集群 编辑:程序博客网 时间:2024/04/24 03:06
随便写写css,重点的地方我已经加了注释并用红色显示了,有兴趣的大家可以看看。下面是源码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>.a_bk{text-align:center;border:1px solid #ccc;width:50px;height:20px;color:black;display:block;text-decoration:none;/*这样才能使相邻的a看起来就隔着一个边框*/margin: -1px 0 0 -1px;float:left;/*使得相邻排列*/position:relative;border-bottom-left-radius: 2px;white-space: nowrap;    text-overflow: ellipsis;}.a_bk:hover{border:1px solid  #1796f9;border-radius:2px;/*这样才能使鼠标放上去的时候显示全部的蓝色框,否则因为maring的缘故,边框的右半部分会被相邻的a的边框遮盖 */z-index: 10;}</style></head><body><div style = "width:300px;height:150px;border:1px solid #ccc;margin:30% auto;">        <a href = "#" class = "a_bk">111</a>     <a href = "#" class = "a_bk">222</a>     <a href = "#" class = "a_bk">333</a>    </div></body></html>

原创粉丝点击