weixin_38422826
weixin_38422826
2017-10-28 04:00

悬停效果 白色方块加小三角。

  • css
  • html5
  • css3

图片说明
想实现的悬停效果如上图所示。

自己写的代码如下面所示:
<!DOCTYPE html>



菜鸟教程(runoob.com) div{ border:2px solid white; height: 50px; border-radius:20px ; background:url(http://img4.imgtn.bdimg.com/it/u=2365445168,3406653750&fm=27&gp=0.jpg); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-radius:3px; } li { margin-top:9px; float: left; border-right: 1px solid white; height:35px; } li a { display: inline-block; color: white; text-align: center; padding: 14px 9px; line-height:3px; text-decoration: none; } li: hover{ background-color:rgba(255,255,255,0.5); transition-duration: 0s;} li a:hover { background-color:rgba(255,255,255,0.5); }



实际实现的悬停效果如下图所示:
图片说明

请问如何应该调整悬停的时候白色方块的高度,然后再在白色方块底下加一个小三角。求高人指点。

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

4条回答

为你推荐

换一换