Javascript 当鼠标悬停在复选框上时,如何显示一些信息?
我几乎没有复选框。当我将鼠标悬停在复选框上时,我想显示一些属于这些复选框的信息。我如何使用JS或JQuery来实现这一点? 假设这是我的复选框Javascript 当鼠标悬停在复选框上时,如何显示一些信息?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我几乎没有复选框。当我将鼠标悬停在复选框上时,我想显示一些属于这些复选框的信息。我如何使用JS或JQuery来实现这一点? 假设这是我的复选框 <input type="checkbox" value="monday" checked="checked"> 我想向用户显示“Hello user”或值“monday”或我数据库中的一些数据。如何显示?只需向HTML对象添加一个“title”属性即可 <input title="Text to show" id="chk1"
<input type="checkbox" value="monday" checked="checked">
我想向用户显示“Hello user”或值“monday”或我数据库中的一些数据。如何显示?只需向HTML对象添加一个“title”属性即可
<input title="Text to show" id="chk1" type="checkbox" value="monday" checked="checked" />
或者在jQuery中
$('#chk1').attr('title', 'text to show');
$(“#cb”)。悬停(
函数(){
//显示信息
},
函数(){
//隐藏信息
}
);
或者,您可以只将title属性添加到元素中进行一次快速的粗略尝试(未经测试或其他任何操作,并且没有完全理解您想要的内容)。更不用说您实际尝试了什么。可能是某种程度的
$('input:checkbox').mouseover(function()
{
/*code to display whatever where ever*/
//example
alert($(this).val());
}).mouseout(function()
{
/*code to hide or remove displayed whatever where ever*/
});
当然,有很多方法可以做同样的事情,从使用
toggle()
到类似on()
的方法,您可以使用属性title,并在步骤渲染时从数据库中添加标题值
input type='checkbox' title='tooltip 2'
您可以使用js插件(您需要将重新查询的文本的值添加为属性,请参阅文档)
以下是您的答案:
<input type="checkbox" value="monday" checked="checked">
<div>informations</div>
您有一个html结构如下的示例:
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 1
<div class="infoCheckbox">
<p>Info on checkbox 1</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 2
<div class="infoCheckbox">
<p>Info on checkbox 2</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 3
<div class="infoCheckbox">
<p>Info on checkbox 3</p>
</div>
</div>
这里的演示:是的,这是可能的(jQuery是JavaScript)。这个问题在Google上是第一个热门问题,对我很有帮助。投票支持重新打开。只需将输入内容包装在span中,并将title属性添加到span标记中即可。最简单不过了……不利于触摸screen@SSED-触摸屏没有“悬停”功能。您需要使用“touchstart”“事件尝试创建一些类似的内容。HTML标题属性及其函数是在触摸屏出现之前创建的,因此您必须完全依靠javascript才能获得所需的内容。该死的代码,woow:D
<input type="checkbox" value="monday" checked="checked">
<div>informations</div>
input+div{display:none;}
input:hover+div{display:inline;}
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 1
<div class="infoCheckbox">
<p>Info on checkbox 1</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 2
<div class="infoCheckbox">
<p>Info on checkbox 2</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 3
<div class="infoCheckbox">
<p>Info on checkbox 3</p>
</div>
</div>
$(".checkboxContainer").hover(
function() {
$(this).find(".infoCheckbox:first").show();
},
function() {
$(this).find(".infoCheckbox:first").hide();
}
);