I'm trying to use javascript to create small dialogue boxes which will advise the user how to enter data into a field when they hover over them. I'm extremely new to using javascript so I could be going about this completely the wrong way. Below is my code:
我正在尝试使用javascript创建小对话框，这些对话框会告诉用户当用户将鼠标悬停在字段上时如何将数据输入到字段中。我对使用javascript非常陌生，所以我可能完全以错误的方式解决这个问题。以下是我的代码：
HTML
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>
However the function is not working, changes do happen when hovering over and away from the button tag but not the changes I had expected. I was hoping a small div would appear with help text written inside. Ideally I would also like to have a close button appear within the div that could call a function onclick and remove the div but I am unsure how to remove elements using the onlick method. Any help on how to solve the onmouseover function or how to implement a way of closing the div using onlick would be greatly appreciated. Thanks in advance
但是，该功能无法正常工作，当悬停在按钮标签上方时会发生更改，但不会发生我预期的更改。我希望在里面写一个帮助文字会出现一个小div。理想情况下，我还想在div中出现一个关闭按钮，可以调用函数onclick并删除div，但我不确定如何使用onlick方法删除元素。任何有关如何解决onmouseover函数或如何使用onlick实现关闭div的方法的帮助将不胜感激。提前致谢
4 个解决方案
#1
7
You can use bootstrap, or any other javascript libraries, along with jQuery for the same purpose. Its better to use them, Please have a look at,
您可以使用bootstrap或任何其他javascript库以及jQuery来实现相同的目的。最好使用它们，请看看，
HTML
HTML
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"></i>
</a>
Script
脚本
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});.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>#2
4
You can use CSS and html only..
你只能使用CSS和html ..
CSS:
CSS：
<style type="text/css">
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: relative; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
div#tooltip a {
position:relative;
}
div#tooltip a span {
display:none;
}
div#tooltip a:hover span {
display:block;
position:absolute; width: 100px;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;
}
div#tooltip a:hover {text-indent:0;}
#tooltip button { border-radius: 50%;
border: 1px solid black;
padding-top: 3px; }
</style>
HTML:
HTML：
<div id="tooltip">
<a href=""><button id="button" >?</button>
<span>This is an example of some hover text!</span>
</a>
</div>
#3
1
I don't think your js function has anything wrong, but your html structure is really in a mess. I changed the structure of your HTML and realize the function you what with the same code you provide.
我不认为你的js函数有什么不对，但你的html结构真的很乱。我更改了HTML的结构，并使用您提供的相同代码实现了您的功能。
<html>
<head>
<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>
<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>
</head>
<body>
<div>
<button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
</div>
</body>
</html>
#4
1
with your code, you operate with button, not div. to affect on div with innerHTML you need something like this:
使用您的代码，您使用按钮操作，而不是div。要使用innerHTML影响div，你需要这样的东西：
<div id="my_div">
<button id="button" onmouseover="javascript:mOver('my_div');" onmouseout="javascript:mOut('my_div');">?</button>
</div>
to make X button work, use this:
要使X按钮工作，请使用：
<button onclick="javascript:mOut('my_div');">X</button>
#1
7
You can use bootstrap, or any other javascript libraries, along with jQuery for the same purpose. Its better to use them, Please have a look at,
您可以使用bootstrap或任何其他javascript库以及jQuery来实现相同的目的。最好使用它们，请看看，
HTML
HTML
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"></i>
</a>
Script
脚本
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});.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>#2
4
You can use CSS and html only..
你只能使用CSS和html ..
CSS:
CSS：
<style type="text/css">
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: relative; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
div#tooltip a {
position:relative;
}
div#tooltip a span {
display:none;
}
div#tooltip a:hover span {
display:block;
position:absolute; width: 100px;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;
}
div#tooltip a:hover {text-indent:0;}
#tooltip button { border-radius: 50%;
border: 1px solid black;
padding-top: 3px; }
</style>
HTML:
HTML：
<div id="tooltip">
<a href=""><button id="button" >?</button>
<span>This is an example of some hover text!</span>
</a>
</div>
#3
1
I don't think your js function has anything wrong, but your html structure is really in a mess. I changed the structure of your HTML and realize the function you what with the same code you provide.
我不认为你的js函数有什么不对，但你的html结构真的很乱。我更改了HTML的结构，并使用您提供的相同代码实现了您的功能。
<html>
<head>
<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>
<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>
</head>
<body>
<div>
<button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
</div>
</body>
</html>
#4
1
with your code, you operate with button, not div. to affect on div with innerHTML you need something like this:
使用您的代码，您使用按钮操作，而不是div。要使用innerHTML影响div，你需要这样的东西：
<div id="my_div">
<button id="button" onmouseover="javascript:mOver('my_div');" onmouseout="javascript:mOut('my_div');">?</button>
</div>
to make X button work, use this:
要使X按钮工作，请使用：
<button onclick="javascript:mOut('my_div');">X</button>