css+jQuery实现顶部带尖角的提醒框

最新推荐文章于 2023-11-22 12:00:24 发布

xiangzhihaocsdn

最新推荐文章于 2023-11-22 12:00:24 发布

阅读量930

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiangzhihaoCSDN/article/details/82258038

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS+jQuery实现带尖角的友好提醒框并且提醒框可消失.代码如下,复制粘贴即可用

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS实现带尖叫的友好提示框</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>

.icon{ width:20px;height:20px;border-radius:4px;background-color:#37DB90;margin-left:30px;color:#fff;font-size:18px;line-height:20px;text-align:center;}

.tip{width:200px;height:50px;border:0px;border-radius:4px;background-color:#37DB90;margin-top:10px;z-index:99;color:white;font-size:18px;display:none;}

.tip .inner{background-color:#FFF;width:10px;height:10px;border:0px;position:relative;left:35px;top:-5px;transform:rotate(45deg);border-right:0px;border-bottom:0px;background-color:#37DB90;}

</style>

</head>
<script>
	$(function(){
		$(".icon").hover(function (){  
            $(this).next().show();  
        },function (){  
            $(this).next().hide();  
        });  
	});

</script>
<body>

<p>CSS实现带尖叫的友好提示框</p>
<div class="icon">
	<span>&copy;</span>
</div>
<div class="tip">

	<div class="inner"></div>

	<div style="margin:4px;">&nbsp;&nbsp;独家版权作品</div>

</div>

</body>

</html>