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>©</span>
</div>
<div class="tip">
<div class="inner"></div>
<div style="margin:4px;"> 独家版权作品</div>
</div>
</body>
</html>