web前端小白案例-鼠标移入移出效果

知识点：html标签，css样式（企业样式的活用），html加css布局思维，代码优化。特效原理（class类名活用）。

html代码：

    <div id="container">
        <div class="box1 text">
            <img src="images/1.jpg" width="250" height="350" alt="1.jpg"/> <!--四要素  src="图片储存位置" width="宽度" height="高度" alt="描述"-->
            <p>心形</p>
        </div>

        <div class="box2 con">
            <div class="pictxtop text">
                <img src="images/2.jpg"  width="250" height="165"  />
                <p>草原</p>
            </div>
            <div class="pictxtbotom text">
                <img src="images/3.jpg"  width="250" height="165"  />
                <p>荷花</p>
            </div>
        </div>
        <div class="box3 text">
            <img src="images/4.jpg" width="490" height="350"  />
            <p>猫头鹰</p>
        </div>
        <div class="box4 con">
            <div class="pictxtop text">
                <img src="images/5.png"  width="250" height="165"  />
                <p>草原</p>
            </div>
            <div class="pictxtbotom text">
                <img src="images/6.jpg"  width="250" height="165"  />
                <p>荷花</p>
            </div>
        </div>
    </div> 

css代码：

   <style>/*CSS层叠样式表  化妆师*/
        *{margin:0;/*外边距*/padding:0;/*内边距*/}/* *通用选择器 所有元素 */
        #container{/* #+ID选择器名字 */
            width:1315px;/*px 像素单位 百分比%*/
            height:350px;
            /*border:1px solid red;边框 : 大小 实线*/
            margin:150px auto;/*auto默认居中*/
        }
        #container .box1{ /* .+类选择器名字*/
            width:250px;
            height:350px;
            float: left;
             margin-right: 20px;

        }
        #container .box2{
            width:250px;
            height:350px;
            float: left;
            margin-right: 20px;/*右边 外边距*/
        }
        #container .box3{
            width:490px;
            height:350px;
            float:left;
            margin-right: 20px;
        }
        #container .box4{
            width:250px;
            height:350px;
            float:left;
        }
        #container .text{ position:relative;/*相对定位*/overflow:hidden;}
        #container .text p{
            height:30px;
            width:100%;
            background:rgba(0,0,0,0.5);/*0*/
            line-height:30px;/*行高*/
            text-indent:40px;/*字符缩进*/
            color:#fff;/*字体颜色*/
            position:absolute;/*绝对定位*/
            left:0;/*距离左边多少*/
            bottom:-30px;/*底部对齐多少*/
        }
        #container .con  .pictxtop{
            width:250px;
            height:165px;

        }
        #container .con  .pictxtbotom{
            width:250px;
            height:165px;
            margin-top:20px;
        }
   </style>

javascript代码：

   <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
   <!--使用调用方法-->
   <script>
        //找元素 $("")
        $("#container .text").hover(function(){
            $(this).find("p").animate({bottom:"0px"})
        },function(){
            $(this).find("p").animate({bottom:"-30px"})
        });
   </script>

原文地址：http://blog.51cto.com/13457136/2087887