css实现气泡框效果

最新推荐文章于 2024-12-18 17:30:53 发布

原创最新推荐文章于 2024-12-18 17:30:53 发布 · 717 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #web前端

web前端同时被 3 个专栏收录

27 篇文章

订阅专栏

开发

22 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

利用css实现如上图所示的气泡框效果。

<div class="disNone">							
									<span class="top"></span>	
									<img src="img/footer-appdownload (1).png" alt="苹果下载"/>
								</div>

/*气泡框效果实现*/
.footer .footerArea .footerRight ul li a:hover .disNone span{
	width:0; 
	height:0; 
	font-size:0; 
	overflow:hidden; 
	position:absolute;
}
.footer .footerArea .footerRight ul li a:hover .disNone span.top{
    border-width:13px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:46px; 
    bottom:-23px;
}

以上！