如何顯示懸停在複選框上的某些信息？

我有幾個複選框。當我將鼠標懸停在這些複選框上時，我想顯示一些屬於這些複選框的信息。我如何使用JS或JQuery來做到這一點？想這是我的複選框如何顯示懸停在複選框上的某些信息？

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

我想顯示用戶「你好用戶或值‘星期一’或從我的數據庫。如何一些數據？

來源

2013-01-16 Ashish Kumar Sahoo

是的，這是可能的（和jQuery **是** JavaScript）。 [你有什麼*嘗試過？]（http://whathaveyoutried.com） –

這個問題是在谷歌的第一擊，並幫助我。投票重新開放。 – Basilevs

只需添加一個‘title’屬性您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');

來源

2013-01-16 14:48:19

最簡單... – user3370889

對觸摸屏沒有好處 – SSED

@SSED - 觸摸屏沒有「懸停」。您需要使用「touchstart」事件來嘗試創建一些簡單的事件。 https：//開頭計算器。com/a/39387341/884862 HTML標題屬性和它的功能是在觸摸屏是事物之前創建的，所以你必須完全依靠JavaScript來獲得你想要的東西。 –

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

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

或者您也可以添加標題屬性的元素

來源

2013-01-16 14:48:42

以快速粗刺（未測試什麼的，並沒有完全理解你想要的..更何況你已經什麼實際上試過..也許東西的程度..

$('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()的東西升IKE on()

來源

2013-01-16 14:48:45 chris

您可以使用屬性標題和步渲染從數據庫添加標題的價值

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

您可以用js插件（你需要的屬性requered文本的增值，見文檔） http://onehackoranother.com/projects/jquery/tipsy/

來源

2013-01-16 14:49:00

這裏是你的答案：

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

和CSS：

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

你有一個例子here

來源

2013-01-16 14:51:42

具有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的處理程序是指當前元素的文本徘徊：

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

演示在這裏：http://jsfiddle.net/pdRX2/

來源

2013-01-16 14:53:25

如何顯示懸停在複選框上的某些信息？

回答

相關問題