zoukankan      html  css  js  c++  java
  • jquery 弹出层定位到相应位置 内容关键字提示

    代码如下 拷贝即可看到效果

    <!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>
    <script type="text/javascript" src="http://www.biztae.com/website/js/jquery-1.4.2-development.js"></script>
    <style type="text/css">
    .showbox
    {
    display: none;
    260px;
    position: absolute;
    background-color: White;
    border: solid 1px #cad9ea;
    }
    .showbox ul
    {
    margin: 0px;
    padding: 0px;
    padding: 5px;
    }
    .showbox ul li
    {
    list-style: none;
    line-height: 1.8em;
    }

    .showbox li.more
    {
    padding-right: 10px;
    text-align: right;
    }
    .showbox li a
    {
    display: block;
    }
    .showbox li a:hover
    {
    background-color: #f0f3f9;
    color: #ff5500;
    }
    </style>
    </head>
    <body>
    <div class="link">
    中新网11月14日报道:中新网金融频道从央行获悉, <a id='aa' href="#" onmouseover="display()" onmouseout="disappear()">
    懒人建站—鼠标划过来试试</a>
    <div class="showbox">
    <ul>
    <li><a href="#" target="_blank">第一条</a></li>
    <li><a href="#" target="_blank">第二条</a></li>
    <li><a href="#" target="_blank">第三条</a></li>
    <li><a href="#" target="_blank">第四条</a></li>
    <li><a href="#" target="_blank">第五条</a></li>
    <li class="more"><a href="#" target="_blank">更多...</a></li>
    </ul>
    </div>
    据中国人民银行授权中国外汇交易中心公布的消息,2011年11月16日银行间外汇市场人民币汇率中间价为:1美元对人民币6.3509元,1欧元对人民币8.5813元,100日元对人民币8.2388元,1港元对人民币0.81601元,1英镑对人民币10.0401元,人民币1元对0.50610林吉特,人民币1元对4.8350俄罗斯卢布。(中新网金融频道)
    中新网11月14日报道:中新网金融频道从央行获悉,据中国人民
    <a href="#" id='bb' onmouseover="display1()" onmouseout="disappear1()">
    123</a>
    <div class="showbox">
    <ul>
    <li><a href="#" target="_blank">第一条1</a></li>
    <li><a href="#" target="_blank">第二条1</a></li>
    <li><a href="#" target="_blank">第三条2</a></li>
    <li><a href="#" target="_blank">第四条3</a></li>
    <li><a href="#" target="_blank">第五条4</a></li>
    <li class="more"><a href="#" target="_blank">更多...</a></li>
    </ul>
    </div>
    银行授权中国外汇交易中心公布的消息,2011年11月16日银行间外汇市场人民币汇率中间价为:1美元对人民币6.3509元,1欧元对人民币8.5813元,100日元对人民币8.2388元,1港元对人民
    <script type="text/javascript" language="javascript">
    $("#aa").mouseover(function () {
    $(this).next("div").show();
    var offset = $(this).offset();
    var height = $(this).height();
    $(this).next("div").css("top", offset.top + height);
    $(this).next("div").css("left", offset.left);
    });
    $("#aa").mouseout(function () {
    $(this).next("div").hide();
    });
    $("#aa").next("div").mouseover(function () {
    $(this).show();
    });
    $("#aa").next("div").mouseout(function () {
    $(this).hide();
    });


    $("#bb").mouseover(function () {
    $(this).next("div").show();
    var offset = $(this).offset();
    var height = $(this).height();
    $(this).next("div").css("top", offset.top + height);
    $(this).next("div").css("left", offset.left);
    });
    $("#bb").mouseout(function () {
    $(this).next("div").hide();
    });
    $("#bb").next("div").mouseover(function () {
    $(this).show();
    });
    $("#bb").next("div").mouseout(function () {
    $(this).hide();
    });
    </script>
    </div>
    </body>
    </html>

    海贼王

  • 相关阅读:
    解决 Cordova 打包 vue项目为 APP 后,在安卓平台下 touchMove 事件不生效的问题
    解决微信内置浏览器里,下拉无法捕获 touchEnd 事件
    记录 React-native 项目中的各种坑坑
    内存型游戏外挂讲解
    浅谈数据抓取的几种方法
    php链表笔记:合并两个有序链表
    php链表笔记:链表的检测
    php链表笔记:单链表反转
    使用UUID和int自增主键的区别
    lumen框架使用Elasticsearch详解
  • 原文地址:https://www.cnblogs.com/wrhming/p/2253866.html
Copyright © 2011-2022 走看看