我正在尝试使用
javascript创建小对话框,这些对话框会告诉用户当用户将鼠标悬停在字段上时如何将数据输入到字段中.我对使用javascript非常陌生,所以我可能完全以错误的方式解决这个问题.以下是我的代码:
HTML
<html> <body> <div> <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button> </div> <script> function mOver(obj) { obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>" } function mOut(obj) { obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>" } </script> </script> </body> <style type="text/css"> #button { border-radius: 50%; border: 1px solid black; padding-top: 3px; padding-bottom: 3px; } #info { margin-left: 5%; } #help_container { border: 0.5px solid black; background-color: #efefef; width: 20%; } #close { float: right; margin-top: 1%; background-color: #efefef; border: 0px solid #efefef; } #help_text { margin: 5%; font-family: Arial; font-size: 15px; } </style> </html>
但是,该功能无法正常工作,当悬停在按钮标签上方时会发生更改,但不会发生我预期的更改.我希望在里面写一个帮助文字会出现一个小div.理想情况下,我还想在div中出现一个关闭按钮,可以调用函数onclick并删除div,但我不确定如何使用onlick方法删除元素.
任何有关如何解决onmouseover函数或如何使用onlick实现关闭div的方法的帮助将不胜感激.
提前致谢
解决方法
您可以使用bootstrap或任何其他javascript库以及jQuery来实现相同的目的.最好使用它们,请看看,
HTML
<a data-toggle="tooltip" title="add to cart"> <i class="icon-shopping-cart"></i> </a>
脚本
$('a[data-toggle="tooltip"]').tooltip({ animated: 'fade',placement: 'bottom',});
$('a[data-toggle="tooltip"]').tooltip({ animated: 'fade',});
.cart { overflow:hidden; padding:10px 3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> <div class="cart"> <a data-toggle="tooltip" title="add to cart"> <i class="icon-shopping-cart"> Cart</i> </a> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。