悬停在复选框上时如何显示一些信息？ [关闭]答案

【问题标题】：How to show some information while hover on checkbox? [closed]悬停在复选框上时如何显示一些信息？ [关闭]
【发布时间】：2012-12-30 22:05:36
【问题描述】：

我有几个复选框。当我将鼠标悬停在这些复选框上时，我想显示一些属于这些复选框的信息。我如何使用 JS 或 JQuery 来做到这一点？假设这是我的复选框

 <input type="checkbox" value="monday" checked="checked">

我想向用户显示“Hello User 或值 'monday' 或我的数据库中的一些数据。如何？

【问题讨论】：

是的，这是可能的（并且 jQuery 是 JavaScript）。 What have you tried?
这个问题是谷歌的第一个热门问题并帮助了我。投票支持重新开放。
只需将输入包装在 span 中，并将 title 属性添加到 span 标签。

标签： javascript jquery html css

【解决方案1】：

只需为您的 HTML 对象添加一个“标题”属性即可。

<input title="Text to show" id="chk1" type="checkbox" value="monday" checked="checked" />

或者在 JavaScript 中

document.getElementById("chk1").setAttribute("title", "text to show");

或者在 jQuery 中

$('#chk1').attr('title', 'text to show');

【讨论】：

简洁至上...
不适合触摸屏
@SSED - 触摸屏没有“悬停”。您需要使用“touchstart”事件来尝试创建一些它的传真。 stackoverflow.com/a/39387341/884862 HTML Title 属性和它的功能是在触摸屏出现之前创建的，所以你必须完全依赖 javascript 来获得你想要的。
代码的地狱，哇：D

【解决方案2】：

<input type="checkbox" id="cb" value="monday" checked="checked">

$("#cb").hover(
   function() {
      // show info
   },
   function() {
      // hide info
   }
);

或者你可以给你的元素添加title属性

【讨论】：

【解决方案3】：

采取快速粗略的刺探（未经测试或其他任何东西，并且不完全了解您想要什么..更不用说您实际尝试过的内容..可能达到了..

$('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() 之类的东西

【讨论】：

【解决方案4】：

您可以使用属性标题并在步骤渲染中从数据库中添加标题值

 input type='checkbox' title='tooltip 2'

您可以使用 js 插件（您需要添加所需文本的值作为属性，请参阅文档） http://onehackoranother.com/projects/jquery/tipsy/

【讨论】：

【解决方案5】：

这是你的答案：

<input type="checkbox" value="monday" checked="checked">
  <div>informations</div>

和css：

input+div{display:none;}
input:hover+div{display:inline;}

你有一个例子here

【讨论】：

【解决方案6】：

使用这样的 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 的“this”处理程序轻松显示文本，该处理程序引用当前悬停的元素：

$(".checkboxContainer").hover(
    function() {
        $(this).find(".infoCheckbox:first").show();
    },
    function() {
        $(this).find(".infoCheckbox:first").hide();
    }
);

在这里演示：http://jsfiddle.net/pdRX2/

【讨论】：

这个小提琴不起作用！