jquery 鼠标悬停显示信息提示框
16lz
2021-01-22
===========
本博客实现将鼠标放置在链接上,弹出提示信息框:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type">
<style type="text/css">
.content{
display:none;
width:250px;
height:70px;
border-radius:10px;
padding:20px;
position:relative;
top:15px;
left:80px;
background-color:#2F4056;
}
</style>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
$(".content").show("slow");
$(".contact").mouseout(function(){
$(".content").hide("slow");
});
});
})
</script>
</head>
<body>
<a href="#" style="color: blue" class="contact">不再犹豫</a>
<div class="content" style="color: white;">
无聊望见了忧郁,达到理想不太易<br /><br />
谁人定我去或留,定我心中的宇宙
</div>
</body>
</html>
效果如下:
当然也可以将链接改为按钮等,信息提示框的样式位置也可以根据需求自定义。
更多相关文章
- Jquery禁用/启用按钮与文本框代码
- 推荐web 前端代码的编辑分享平台——RunJS
- 想要改进我的jQuery代码,做我想要的,太丑了,IMO
- JQuery的一些基本功能代码(CH1&2)
- 如何让代码等待好/取消按钮选择?
- 如何在向下滚动时执行TEXT淡入效果
- 【jQuery】调用delay()方法延时执行动画效果
- 如何在angularjs代码中单元测试jquery元素
- jquery常用代码片段