이 글에서는 HTML로 간단한 프롬프트 박스를 구현하는 방법을 알려드리겠습니다. 프로젝트에는 간단한 프롬프트 박스가 필요하기 때문에 마우스를 올려두기만 하면 관련 정보를 프롬프트할 수 있기 때문에 더 번거롭습니다. 제3자이므로 여기에는 매우 간단한 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>
관련 권장 사항: CSS boxcode_PHP를 사용하여 프롬프트 상자를 구현하는 방법에 대한 자세한 예 튜토리얼
위 내용은 HTML은 간단한 프롬프트 상자를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!