鼠标移入图片，底部遮罩层缓慢进入效果

发布于
2017-11-08

一张图片效果是正常的，多张图片效果会混乱，不知道哪里有问题？
<!DOCTYPE html>
<html>
<head lang="en">

<meta charset="UTF-8">
<title></title>
<style>
    a{
        color:#fff;
        text-decoration: none;
        font-size:12px;
    }
    .container{
        overflow:hidden;
    }
    .box{
        width:25%;
        float:left;
        position:relative;
    }
    .content{
        width:350px;
        height:400px;
        color:#fff;
        display: none;
        position:absolute;
        bottom:5px;
        background-color: rgba(0,0,0,0.8);
    }
    .textSty{
        font-size:26px;
    }
    .point_bottom{
        width:5px;
        height:5px;
        background-color: #ce1b2e;
        position:absolute;
        z-index:4;
        left:30px;
        bottom:80px;
        transition: bottom 0.5,opacity 0.5;
    }
    .point_bottom::after{
        content:"";
        width:1px;
        height:150px;
        background-color: rgba(255,255,255,0.3);
        position:absolute;
        top:5px;
        left:2px;
    }
    .point_top{
        width:5px;
        height:5px;
        background-color: #ce1b2e;
        position:absolute;
        z-index:4;
        left:30px;
        top:-5px;
        opacity:0;
        transition: top 0.5,opacity 0.5;
    }
    .point_top::after{
        content:"";
        width:1px;
        height:150px;
        background-color: rgba(255,255,255,0.3);
        position:absolute;
        bottom:5px;
        left:2px;
    }
    .item{
        width:80%;
        margin:0 auto;
        position:relative;
        top:36px;
        left:10px;
    }
    .tipShow{
        top:80px;
        opacity:1;
    }
    .tipHidden{
        bottom:0px;
        opacity:0;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>

<div class="container">
    <div class="box">
        <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/technology_350-400.ashx?h=400&la=zh-CN&w=350&hash=DA7BD5A87C3DA8C8444FE0C1749D21B5A0EFC73F" alt="animation" id="img1"/>
        <div class="content" id="img1Content">
            <div class="item">
                <p class="textSty">技术实施</p>
                <ul style="min-height:230px;">
                    <li>数字化咨询</li>
                    <li>其他咨询服务</li>
                </ul>
                <a href="#">了解详情>></a>
            </div>
        </div>
        <div class="point_top" id="img1PointTop"></div>
        <div class="point_bottom" id="img1PointBottom"></div>
    </div>
    <div class="box">
        <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/digital-engagement_350-400.ashx?h=400&la=zh-CN&w=350&hash=CF10CAAA12205064F3219B206F3AB85676E62E20" alt="animation" id="img2"/>
        <div class="content" id="img2Content">
            <div class="item">
                <p class="textSty">体验交互</p>
                <ul style="min-height:230px;">
                    <li>数字化咨询</li>
                    <li>其他咨询服务</li>
                </ul>
                <a href="#">了解详情>></a>
            </div>
        </div>
        <div class="point_top" id="img2PointTop"></div>
        <div class="point_bottom" id="img2PointBottom"></div>
    </div>
    <div class="box">
        <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/consulting_350-400.ashx?h=400&la=zh-CN&w=350&hash=C9087A3B12AA79DC925DEAC5E76821F4D1BF2D2D" alt="animation" id="img3"/>
        <div class="content" id="img3Content">
            <div class="item">
                <p class="textSty">咨询服务</p>
                <ul style="min-height:230px;">
                    <li>数字化咨询</li>
                    <li>其他咨询服务</li>
                </ul>
                <a href="#">了解详情>></a>
            </div>
        </div>
        <div class="point_top" id="img3PointTop"></div>
        <div class="point_bottom" id="img3PointBottom"></div>
    </div>
    <div class="box">
        <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/operations_350-400.ashx?h=400&la=zh-CN&w=350&hash=495027AB1A371D85C9D2B4CC7545470A8B50DFF9" alt="animation" id="img4"/>
        <div class="content" id="img4Content">
            <div class="item">
                <p class="textSty">运营服务</p>
                <ul style="min-height:230px;">
                    <li>数字化咨询</li>
                    <li>其他咨询服务</li>
                </ul>
                <a href="#">了解详情>></a>
            </div>
        </div>
        <div class="point_top" id="img4PointTop"></div>
        <div class="point_bottom" id="img4PointBottom"></div>
    </div>
</div>
<script>
    $(".container").on("mouseover",".box img",function(){
        $(this).parent().find(".content").slideDown(200)
        $(this).parent().siblings(".box").find('.content').slideUp(200)
        $(this).parent().find('div[id$=PointTop]').addClass("tipShow");
        $(this).parent().find('div[id$=PointBottom]').addClass("tipHidden")
    })
    $(".container").on("mouseout",".box .content",function(){
        $(this).slideUp(200)
        $(this).parent().find('div[id$=PointTop]').removeClass("tipShow");
        $(this).parent().find('div[id$=PointBottom]').removeClass("tipHidden")
    });
</script>

</body>
</html>

javascript css

阅读 2.8k

2 个回答

leonleung

✓ 已被采纳

用css很好解决的，完美

<!DOCTYPE html>
<html>

<head lang="en">

  <meta charset="UTF-8">
  <title></title>
  <style>
    a {
      color: #fff;
      text-decoration: none;
      font-size: 12px;
    }

    .container {
      overflow: hidden;
    }

    .box {
      width: 25%;
      float: left;
      position: relative;
    }

    .content {
      width: 350px;
      height: 400px;
      color: #fff;
      position: absolute;
      bottom: -400px;
      background-color: rgba(0, 0, 0, 0.8);
      transition: transform ease 0.2s;
    }

    .box:hover .content {
      transform: translate3d(0, -100%, 0)
    }

    .box:hover .point_bottom {
      opacity: 0;
      bottom: 0;
    }

    .box:hover .point_top {
      opacity: 1;
      top: 80px;
    }

    .textSty {
      font-size: 26px;
    }

    .point_bottom {
      width: 5px;
      height: 5px;
      background-color: #ce1b2e;
      position: absolute;
      z-index: 4;
      left: 30px;
      bottom: 80px;
      transition: all ease 0.5s;
    }

    .point_bottom::after {
      content: "";
      width: 1px;
      height: 150px;
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      top: 5px;
      left: 2px;
    }

    .point_top {
      width: 5px;
      height: 5px;
      background-color: #ce1b2e;
      position: absolute;
      z-index: 4;
      left: 30px;
      top: 0;
      opacity: 0;
      transition: all ease 0.5s;
    }

    .point_top::after {
      content: "";
      width: 1px;
      height: 150px;
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      top: -150px;
      left: 2px;
    }

    .item {
      width: 80%;
      margin: 0 auto;
      position: relative;
      top: 36px;
      left: 10px;
    }

    .tipShow {
      top: 80px;
      opacity: 1;
    }

    .tipHidden {
      bottom: 0px;
      opacity: 0;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

  <div class="container">
    <div class="box">
      <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/technology_350-400.ashx?h=400&la=zh-CN&w=350&hash=DA7BD5A87C3DA8C8444FE0C1749D21B5A0EFC73F"
        alt="animation" id="img1" />
      <div class="content" id="img1Content">
        <div class="item">
          <p class="textSty">技术实施</p>
          <ul style="min-height:230px;">
            <li>数字化咨询</li>
            <li>其他咨询服务</li>
          </ul>
          <a href="#">了解详情>></a>
        </div>
      </div>
      <div class="point_top" id="img1PointTop"></div>
      <div class="point_bottom" id="img1PointBottom"></div>
    </div>
    <div class="box">
      <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/digital-engagement_350-400.ashx?h=400&la=zh-CN&w=350&hash=CF10CAAA12205064F3219B206F3AB85676E62E20"
        alt="animation" id="img2" />
      <div class="content" id="img2Content">
        <div class="item">
          <p class="textSty">体验交互</p>
          <ul style="min-height:230px;">
            <li>数字化咨询</li>
            <li>其他咨询服务</li>
          </ul>
          <a href="#">了解详情>></a>
        </div>
      </div>
      <div class="point_top" id="img2PointTop"></div>
      <div class="point_bottom" id="img2PointBottom"></div>
    </div>
    <div class="box">
      <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/consulting_350-400.ashx?h=400&la=zh-CN&w=350&hash=C9087A3B12AA79DC925DEAC5E76821F4D1BF2D2D"
        alt="animation" id="img3" />
      <div class="content" id="img3Content">
        <div class="item">
          <p class="textSty">咨询服务</p>
          <ul style="min-height:230px;">
            <li>数字化咨询</li>
            <li>其他咨询服务</li>
          </ul>
          <a href="#">了解详情>></a>
        </div>
      </div>
      <div class="point_top" id="img3PointTop"></div>
      <div class="point_bottom" id="img3PointBottom"></div>
    </div>
    <div class="box">
      <img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/operations_350-400.ashx?h=400&la=zh-CN&w=350&hash=495027AB1A371D85C9D2B4CC7545470A8B50DFF9"
        alt="animation" id="img4" />
      <div class="content" id="img4Content">
        <div class="item">
          <p class="textSty">运营服务</p>
          <ul style="min-height:230px;">
            <li>数字化咨询</li>
            <li>其他咨询服务</li>
          </ul>
          <a href="#">了解详情>></a>
        </div>
      </div>
      <div class="point_top" id="img4PointTop"></div>
      <div class="point_bottom" id="img4PointBottom"></div>
    </div>
  </div>
</body>

</html>