zoukankan      html  css  js  c++  java
  • Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了。代码如下,记得引入Jquyer库。(当鼠标移动到id=menu的div上的时候,显示id=list的div,然后将鼠标再次移动到id=list的div上的时候,list的div也不会隐藏)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <!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">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            <!--
            $(function () {
                $("#list").hide();
                $("#menu").hover(function () {
                    $("#list").show();
                }, function () {
                    $("#list").hide();
                })
                // 鼠标移动到list的div上的时候list div不会被隐藏
                $("#list").hover(function () {
                    $("#list").show();
                }, function () {
                    $("#list").hide();
                })
            });
            //-->
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div id="menu" style=" 300px; height: 100px; border: 1px solid red;">
            </div>
            <div id="list" style=" 300px; height: 300px; ">
            </div>
        </div>
        </form>
    </body>
    </html>

  • 相关阅读:
    freak out用法
    kinda用法
    比较级与最高级
    issue用法
    invite用法
    yet用法
    follow用法
    get用法
    turn up&turn off&turn on用法
    关于document.lastModified属性
  • 原文地址:https://www.cnblogs.com/LoveQin/p/4680821.html
Copyright © 2011-2022 走看看