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

Posted 2023-05-08

【中文标题】jQuery 悬停效果：一个 div 消失，另一个 div 出现

【英文标题】：jQuery Hover Effects: Having One Div Disappear And Another Div Appear

【发布时间】：2014-06-12 15:37:53

【问题描述】：

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

我最初的问题是寻求悬停动画的帮助（效果很好）；但是，当一个 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"  /></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();
        
    );
);

有人对如何解决这个问题有任何建议吗？

【参考方案1】：

使用 CSS

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

Fiddle.

+ 表示 下一个孩子，而 :not() 在内部条件为假时计算为真，在这种情况下，.layer3 未悬停 .

【讨论】：

你的语法怎么写？

谢谢 bjb568；但是，Andreas 的解决方案更接近我的目标。

@bjb568 滥用 javascript 是什么意思？为什么在这种情况下使用纯 CSS 优于 jQuery？ （真诚地问）

@Andreas 最简单的答案是 CSS 就是为此而生的。因此，误用会产生各种副作用。使用 JS（此外，它上面的库）会减慢转换速度，因此看起来很粗糙。使用 jQuery 还需要相当多的代码，因此更难调试和维护。当然，使用 javascript 也需要用户启用 javascript。

【参考方案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();
        
    );
);

【讨论】：

你的安德烈亚斯在写轨道上；但是，我需要它分布在四个不同的 div 上。例如：“海滩 1”、“海滩 2”、“海滩 3”、“海滩 4”。

现在去睡觉了。如果到那时你还没有得到答案，我明天会写一篇关于这个的文章:)