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

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() 在内部条件为假时计算为真，在这种情况下，.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();
        }
    );
});