溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖，如下
代碼如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
// 文字帶邊框提示條提示條
$('#masterTooltip1').hover(
function(){
// 鼠標懸浮經過事件
var title = "jQuery簡單提示條";
//$(this).data('tipText', title);
$('<p class="tooltip"></p>')
.text(title)
.appendTo('.container')
.fadeIn('slow');
},
function() {
// 鼠標懸浮離開事件
$('.tooltip').remove();
}).mousemove(
function(e) {
var mousex = e.pageX + 2; //獲得X軸坐標
var mousey = e.pageY + 1; //獲得Y軸坐標
$('.tooltip').css({ top: mousey, left: mousex });
});
});
</script>
<style>
.tooltip {
display:none;
position:absolute;
border:1px solid #9abbe8;
background-color:white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #9abbe8 1px 5px 20px;
-moz-box-shadow: #9abbe8 1px 5px 20px;
box-shadow: #9abbe8 1px 5px 20px;
padding:10px;
color:black;
font-size:12px;
width: 120px;
white-space: normal;
z-index: 1000;
}
</style>
<body>
<div class="container">
<h2>如何制作jQuery效果</h2>
<h3>jQuery簡單提示條</h3>
<h3>鼠標經過</h3>
<img id="masterTooltip1" src="aboutus.png"/>
<div class="container">
</div>
</body>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
