2015-06-26 43 views
0

如何使用jquery或javascript在鼠標上顯示和隱藏文本?

function Hover() { 
 
    //display something inside div id=dynamicDivFirstModule 
 
} 
 
function HoverClear() { 
 
    //clear// 
 
} 
 
    
<div ID="dynamicDivFirstModule" > 
 
<%-- Dynamic Div--%> 
 
    <div id="dynamicDiv" style="display:none; border:solid;" > 
 
     <table> 
 
      <tr> 
 
       <td class="auto-style1" rowspan="2"> 
 
        <asp:TextBox ID="textbox" TextMode="MultiLine" runat="server" ReadOnly="true" style="overflow:auto;" Height="102px" Width="235px"></asp:TextBox> 
 
       </td> 
 
       <td id="hoverHere"> 
 
        <p id="hover" class="masterTooltip" onmouseover="Hover();" onmouseOut="HoverClear()">?</p> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <asp:Button ID="Delete" runat="server" Text="Delete" CssClass="removeDiv" />   
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <%-- Dynamic Div--%> 
 
</div>
鼠標懸停我想顯示一個文本..我怎麼能顯示裏面的id文本= dynamicDivFirstModule ..text將顯示在鼠標指針尖端和消失鼠標移開時

+0

什麼元素應該有懸停效果?我的意思是,哪個元素懸停顯示div內容? – messerbill

+0

@Syed做任何答案幫助? – tariq

回答

0

嘗試這樣

<div id="dynamicDivFirstModule" style="height:600; width:500; background-color:red;">something else</br> 
<span id="textSpan" style="display:none;">Text appears</span> 
</div> 




$(document).ready(function(){ 
    $("#dynamicDivFirstModule").on('mouseenter',function() { 
     $("#textSpan").show(); 
    }); 
    $("#dynamicDivFirstModule").on('mouseout',function() { 
     $("#textSpan").hide(); 
    }); 
}); 

DEMO

在你的情況下更改代碼同樣, 使懸停paragra ph最初沒有顯示屏

$(document).ready(function(){ 
    $("#hoverHere").on('mouseenter',function() { 
     $("#hover").show(); 
    }); 
    $("#hoverHere").on('mouseout',function() { 
     $("#hover").hide(); 
    }); 
}); 
0

正如您所說,您希望文本顯示在鼠標指針提示上,我開發了此代碼,它可能對您有所幫助。

HTML

<div>A</div> 
<div>B</div> 
<span id="textSpan" style="display:none;position:absolute;"></span> 

CSS

div{ 
    width: 10px; 
    cursor :default; 
} 

JS

$(document).ready(function(){ 
$("div").on('mouseover',function(e) { 
    var div = $(this).html(); 
    $("#textSpan").html(div).css({left:e.pageX, top:e.pageY-15}).show(); 
}); 
    $("div").on('mouseout',function(e) { 
    $("#textSpan").hide(); 
    }); 
}); 

http://jsfiddle.net/cup6o3hn/3/

0

一個簡單的jQuery懸停功能會做:

$(document).ready(function(){ 
    $("#hoverHere").hover(
     function() 
     { 
      $("#hover").show(); 
     }, 
     function() 
     { 
      $("#hover").hide(); 
     } 
    ); 
});