jquery 鼠标悬停显示信息提示框

===========

本博客实现将鼠标放置在链接上,弹出提示信息框:

代码如下:


<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 鼠标悬停显示信息提示框_第1张图片

当然也可以将链接改为按钮等,信息提示框的样式位置也可以根据需求自定义。

你可能感兴趣的:(jquery)