Jquery---超级链接提示

浏览数：21 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Resources/jquery-1.4.2.js"></script>
<title>超级链接提示</title>
<style type="text/css">
#reminder
{
position:absolute;
border:1px solid #333;
background:red;
color:#333;
display:none;
}

</style>
<script type="text/javascript">
$(document).ready(function() //文字提示
{
$(".link").mouseover(function(e)
{
var newDiv = "<div id=‘reminder‘>"+ this.title +"<//div>";

   $("body").append(newDiv);
$("#reminder")
   .css({
    "top": e.pageY + "px",
    "left": e.pageX + "px"
   }).show("fast");

    }).mouseout(function(){
  $("#reminder").remove();
    });

    $(".picLink").mouseover(function(e) //图片提示
    {
         var newDiv="<div id=‘reminder‘>"+"<img src=‘image/apple_1.jpg‘ />"+" </div>";
         $("body").append(newDiv);
         $("#reminder").css(
          {
            "top": e.pageY+ "px",
         "left": e.pageX + "px"

          }).show("fast");

    }).mouseout(function(){
$("#reminder").remove();

});
});

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p> <a href="#" class="link" title="文字显示提示">超级链接1</a></p>
    <p><a href="#" title="自带的超级链接">自带提示的超级链接</a></p>
    <p><a href="#" class="picLink">图片显示提示</a></p>
    </div>
    </form>
</body>
</html>

此代码中红色部分为关键, 首先了解此代码中涉及到的Jquery语法：

a.mouseover(fn)

在每一个匹配元素的mouseover时间中绑定一个处理函数,mouseover 事件会在鼠标移如对象时触发。

fn:在每一个匹配元素的mouseover 事件中绑定的处理函数

mouseout(fn):事件会在鼠标移出对象时触发

b.append(content)

向每个匹配的元素内部追加内容

c.class(property)

在每一个匹配元素上设定属性。该方法是在匹配的元素上设置大量样式属性的最佳方式。

图片提示与文字提示基本一样，所不同的是：图片提示时，在创建div元素的时候，需要<img > 标签。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery---超级链接提示