13hoop/.html

## .html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 初探</title>
    <!--<link rel="stylesheet" href="demoStyle.css">-->
    <style>
        * {padding: 0; margin: 0;
            font-size:15px}

        .page {
            margin:0 auto;
            max-width: 1000px;
        }

        ul {
            list-style: none;
            cursor: pointer;
        }

        .firstUl {
            background: #c7171e;
            width: 180px;
            color: white;
            padding-left: 10px;
        }

        .firstUl > li {
            border-bottom:1px  dotted darkorange;
            line-height: 40px;
            height: 40px;
            position: relative;
        }


        .firstUl > li:hover {
            background: #ab171e;
        }

        .firstUl > li > span {
            float: right;
            padding-right: 10px;
        }

        .childUl {
            background: white;
            position: absolute;
            width: 200px;
            left: 180px;
            top: 0px;
            text-align: center;
            display: none;
            opacity: 0.5;
            color: #777777;
        }

        .childUl > li {
            float: left;
            width: 98px;
            border: 1px solid #e7e1cd;
        }

        .childUl > li:hover {
            background: ghostwhite;
            color: #c7171e;
        }


        .showUl {
            display: block;
        }
    </style>
</head>
<body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<div class="page" id="page">

    <ul class="firstUl">
        <li>
            珠宝玉器
            <span> > </span>
            <ul class="childUl">
                <li>翡翠</li>
                <li>玉石</li>
                <li>宝石</li>
                <li>水晶</li>
                <li>玛瑙</li>
                <li>珍珠</li>
                <li>钻石</li>
                <li>琥珀</li>
                <li>和田</li>
            </ul>
        </li>
        <li>珠宝玉器
            <span> > </span>
            <ul class="childUl">
                <li>翡翠</li>
                <li>玉石</li>
                <li>宝石</li>
                <li>水晶</li>
            </ul>
        </li>
        <li>珠宝玉器
            <span> > </span>
            <ul class="childUl">
                <li>玛瑙</li>
                <li>珍珠</li>
                <li>钻石</li>
                <li>琥珀</li>
                <li>和田</li>
            </ul>
        </li>
        <li>珠宝玉器
            <span> > </span>
            <ul class="childUl">
                <li>玛瑙</li>
                <li>珍珠</li>
            </ul>
        </li>
    </ul>
</div>

<script>
    var firstLi = $('.firstUl > li');
    var childUl = $('.childUl');
    firstLi.on('mouseenter', function(e) {
        console.log($(this));
        $(this).find('.childUl').addClass('showUl');
    });
    firstLi.on("mouseleave", function(e) {
        $(this).find('.childUl').removeClass('showUl');
    } );
</script>

</body>
</html>

## bin.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<style>
  .warp {
    background: red;
    opacity: 0.4;
  }

.wrap2{
  /* overflow:hidden; */
    width:322px;
    border:solid 2px green;
}

.wrap2 .inner{
  overflow:hidden;
  background: lightBlue;
  margin-right:-10px;
  margin-bottom:-10px;
  opacity: 0.4;
}

.wrap2 .item{
    float:left;
/*     display: inline-block; */
    width:100px;
    height:100px;
    margin:0px 10px 10px 0;
    background:blue;
}

  .outter {
    width: 100px;
    height: 200px;
    background: orange;
    /* overflow: hidden; */
  }

  .in {
    width: 200px;
    height: 100px;
    background: #eee;
    opacity: 0.4;
    float:left;
}
</style>
<div class="warp">
<div class="wrap2">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
  </div>
</div>
</div>
  <hr>
  <div class="outter">
     <div class="in">
       1111111111111112222222222

     </div>
    <a>dsfasdfasdfasdfasfsafsafasdfdadfasd</a>
  </div>
  <hr>
  <div class="warp001 colored">
    <ul>
      <li>dddddd</li>
      <li></li>
    </ul>

  </div>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>jQuery 初探</title>
	<!--<link rel="stylesheet" href="demoStyle.css">-->
	<style>
	* {padding: 0; margin: 0;
	font-size:15px}

	.page {
	margin:0 auto;
	max-width: 1000px;
	}

	ul {
	list-style: none;
	cursor: pointer;
	}

	.firstUl {
	background: #c7171e;
	width: 180px;
	color: white;
	padding-left: 10px;
	}

	.firstUl > li {
	border-bottom:1px dotted darkorange;
	line-height: 40px;
	height: 40px;
	position: relative;
	}


	.firstUl > li:hover {
	background: #ab171e;
	}

	.firstUl > li > span {
	float: right;
	padding-right: 10px;
	}

	.childUl {
	background: white;
	position: absolute;
	width: 200px;
	left: 180px;
	top: 0px;
	text-align: center;
	display: none;
	opacity: 0.5;
	color: #777777;
	}

	.childUl > li {
	float: left;
	width: 98px;
	border: 1px solid #e7e1cd;
	}

	.childUl > li:hover {
	background: ghostwhite;
	color: #c7171e;
	}


	.showUl {
	display: block;
	}
	</style>
	</head>
	<body>

	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<div class="page" id="page">

	<ul class="firstUl">
	<li>
	珠宝玉器
	<span> > </span>
	<ul class="childUl">
	<li>翡翠</li>
	<li>玉石</li>
	<li>宝石</li>
	<li>水晶</li>
	<li>玛瑙</li>
	<li>珍珠</li>
	<li>钻石</li>
	<li>琥珀</li>
	<li>和田</li>
	</ul>
	</li>
	<li>珠宝玉器
	<span> > </span>
	<ul class="childUl">
	<li>翡翠</li>
	<li>玉石</li>
	<li>宝石</li>
	<li>水晶</li>
	</ul>
	</li>
	<li>珠宝玉器
	<span> > </span>
	<ul class="childUl">
	<li>玛瑙</li>
	<li>珍珠</li>
	<li>钻石</li>
	<li>琥珀</li>
	<li>和田</li>
	</ul>
	</li>
	<li>珠宝玉器
	<span> > </span>
	<ul class="childUl">
	<li>玛瑙</li>
	<li>珍珠</li>
	</ul>
	</li>
	</ul>
	</div>

	<script>
	var firstLi = $('.firstUl > li');
	var childUl = $('.childUl');
	firstLi.on('mouseenter', function(e) {
	console.log($(this));
	$(this).find('.childUl').addClass('showUl');
	});
	firstLi.on("mouseleave", function(e) {
	$(this).find('.childUl').removeClass('showUl');
	} );
	</script>

	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<style>
	.warp {
	background: red;
	opacity: 0.4;
	}

	.wrap2{
	/* overflow:hidden; */
	width:322px;
	border:solid 2px green;
	}

	.wrap2 .inner{
	overflow:hidden;
	background: lightBlue;
	margin-right:-10px;
	margin-bottom:-10px;
	opacity: 0.4;
	}

	.wrap2 .item{
	float:left;
	/* display: inline-block; */
	width:100px;
	height:100px;
	margin:0px 10px 10px 0;
	background:blue;
	}

	.outter {
	width: 100px;
	height: 200px;
	background: orange;
	/* overflow: hidden; */
	}

	.in {
	width: 200px;
	height: 100px;
	background: #eee;
	opacity: 0.4;
	float:left;
	}
	</style>
	<div class="warp">
	<div class="wrap2">
	<div class="inner">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	</div>
	</div>
	</div>
	<hr>
	<div class="outter">
	<div class="in">
	1111111111111112222222222

	</div>
	<a>dsfasdfasdfasdfasfsafsafasdfdadfasd</a>
	</div>
	<hr>
	<div class="warp001 colored">
	<ul>
	<li>dddddd</li>
	<li></li>
	</ul>

	</div>



	</body>
	</html>