使用CSS

Question

我之前写了一个问题，然而，我忘了问第二部分。

我原来的问题是要求悬停动画的帮助（效果很棒）;然而，当一个div消失时，我需要另一个div出现在它的位置。

这是我的代码：

HTML：

 <div class="col-xs-12 col-md-4">
        <div id="beach2"></div>
        <div class="layer3"></div>
        <div class="wrapper">
               <div class="layer4">
                <div class="magnifyingGlass"></div>
                    <a href="#"><img src="images/magnify.png" class="img-responsive" id="magnify" alt="Magnifying Glass" /></a>
               </div>
               <div class="layer5">
               <div class="label">
                        <p class="title">Lorem ipsum dolor sit</p>
                        <p class="title2">amet consetetur sadipscing eltir</p>
                </div>
         </div>
</div>

我需要'.layer3'消失，'。layer4'和'.layer5'出现在悬停中。

CSS：

.layer3{
    width: 100%;
    height: 300px;
    margin-top: -340px;
    background-color: rgba(226, 151, 145, 0.5);
}

.wrapper{
    display: none;
}

#magnify{
    margin-top: -35px;
    padding: 10px 10px;
    z-index: 9999;
}

.magnifyingGlass{
    height: 34px;
    width: 34px;
    background-color: #1abc9c;
    z-index: 999;
}

.layer4{
    height: 44px;
    width: 44px;
    background-color: rgba(26, 188, 156, .5);
    margin: -210px 20px 0 0;
    float: right;
    padding: 5px 5px;
    position: relative;
    margin-top: -205px;
}

.label{
    height: 65px;
    width: 99%;
    background-color: #1abc9c;
    display: block;
    position: relative;
    z-index: 999;
}

.layer5{
    height: 75px;   
    background-color: rgba(26, 188, 156, .5);
    margin-top: -75px;
    padding: 5px 0 0 5px;
    position: relative;
}


.title{
    font-size: 18px;
    color: #fff;
    text-align: left;
    display: block;
    position: relative;
    padding: 10px 5px;
}

#title2{
    color: #087253;
    font-size: 12px;
    text-align: left;
    padding: 0 5px;
    display: block;
    position: relative;
}

jQuery的：

$(document).ready(function(){
    $('.layer3').hover(
        function(){
            $(this).animate({opacity:'0'});
        },
        function(){
            $(this).animate({opacity:'1'});
        }
    );

    $('.wrapper').mouseover(
        function(){
            $(this).show();
        },
        function(){
            $(this).hide();
        }
    );
});

有没有人对如何解决问题有任何建议？

Answer 1

使用CSS

.layer3, .wrapper { transition: opacity 1s }
.layer3:hover, .layer3:not(:hover) + .wrapper { opacity: 0 }

Fiddle

+表示下一个孩子，而:not()在内部条件为false时评估为true，在这种情况下.layer3为没有徘徊。

Answer 2

您是否只能在悬停功能中添加操作？
如果这是您想要实现的目标，那么您应该更好地理解jQuery and it's selectors。

$(document).ready(function(){
    $('.layer3').hover(
        function(){
            $(".layer4, .layer5").show(); // Added this
            $(this).animate({opacity:'0'});
        },
        function(){
            $(".layer4, .layer5").hide(); // And this
            $(this).animate({opacity:'1'});
        }
    );

    $('.wrapper').mouseover(
        function(){
            $(this).show();
        },
        function(){
            $(this).hide();
        }
    );
});

jQuery悬停效果：让一个Div消失，另一个Div出现

2 个答案:

使用CSS