HTML は単純なプロンプト ボックスを実装します

この記事では、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,&#39;myp1&#39;);" onMouseOut="hide(this,&#39;myp1&#39;)">鼠标放上去1</a> 
<br><br><br><br><br> 
<a id="t2" onMouseOver="javascript:show(this,&#39;myp2&#39;);" onMouseOut="hide(this,&#39;myp2&#39;)">鼠标放上去2</a>

関連する推奨事項: CSS を使用してプロンプト ボックスを実装する方法の詳細な例 boxcode_PHP チュートリアル

以上がHTML は単純なプロンプト ボックスを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。