本文我們將和大家分享HTML實現簡單的提示框，由於專案中需要一個簡單的提示框，就是滑鼠放上去，可以提示相關信息，引用第三方的比較麻煩，所以，這裡封裝了一個很簡單的HTML方法。
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function show(obj,id) {
var objp = $("#"+id+"");
/**
这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容
$.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){
objp.html("<br>"+res.data+"<br>");
}, 'json');
**/
$(objp).css("display","block");
$(objp).css("left", event.clientX + 30);
$(objp).css("top", event.clientY - 45);
}
function hide(obj,id) {
var objp = $("#"+id+"");
$(objp).css("display", "none");
}
</script>
<p id="myp1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;">
提示1效果
</p>
<p id="myp2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;">
不知道你们在干嘛呢，<br/>哈哈哈哈
</p>
<a id="t1" onMouseOver="javascript:show(this,'myp1');" onMouseOut="hide(this,'myp1')">鼠标放上去1</a>
<br><br><br><br><br>
<a id="t2" onMouseOver="javascript:show(this,'myp2');" onMouseOut="hide(this,'myp2')">鼠标放上去2</a>
相關推薦：
以上是HTML實作簡單的提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
