hover 右侧的 | 隐藏

实现下图所示效果
这里写图片描述
鼠标经过的时候没有右侧的 |。

一般的方法是用border-right。可是鼠标经过后一个a链接的时候,border-right还在。

后来想的是在a链接下面加span标签,可是实现起来总是不对 a:hover span{display:none}
仅仅是鼠标经过的时候这个a链接下面的span隐藏,当鼠标
hover后一个a链接的时候span 还是在。同border-right。

最终解决方法是——增加一个span标签与a链接同级。
html代码:
<div class="bottom">
<a href="#" class="btn btn-primary">前往购物</a><span>|</span><a href="#" class="btn btn-primary">查看攻略</a>
</div>

css代码
.bottom {
position: relative;
}
.bottom span {
position: absolute;
top: 8px;
left: 50%;
color: #fff;
}
.bottom:hover span {
display: none;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值