如何使用jquery或javascript在鼠标上显示和隐藏文本?

时间:2015-06-26 11:48:52

标签: javascript jquery



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>
&#13;
&#13;
&#13; 在mouseover上我想显示一个文本..如何在id = dynamicDivFirstModule中显示文本..text将在鼠标指针提示上显示并在mouseout上消失

3 个答案:

答案 0 :(得分:0)

试试这个

userContent

DEMO

在您的情况下,同样更改代码, 使悬停段落最初显示为无

<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();
    });
});

答案 1 :(得分: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/

答案 2 :(得分:0)

一个简单的jQuery悬停函数可以:

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