在悬停时更改 div 宽度的最佳方法 [关闭]

Question

这个作品集网站的创建者是如何制作出如此炫酷的图像效果的？ http://www.adhamdannaway.com/

我目前正在训练自己学习更高级的东西，但我在这个效果上遇到了麻烦。

我这样做的方法是制作一个宽度为 1280px 的容器（1280px 是 img 的宽度）。制作了 2 张图像，一张是彩色的，另一张是黑白的。 2 个 div 宽度为 50% 的宽度并向左浮动，浮动战斗。正确的看起来不正确，所以我使用了这个：背景位置：右上角并且它起作用了。即使在更大的屏幕尺寸上，它们也能完美居中。但问题就在这里。我怎样才能做到这一点，当我将左 div 悬停时，div 的宽度为 100%。另一个div也是如此。

我知道我可以用#div:hover 然后宽度 100% 和固定图像在 z-index 上方的情况下做到这一点，但这仅在我悬停时发生，但在我下悬时不会发生。很明显，因为它在 :hover 上。但我目前不知道如何以更好/正确的方式做到这一点。

我已将代码放在 jsfiddle.net/aLyde6pa/ 上，但由于某种原因它不起作用。

我可能解释的比我应该解释的多，但我希望你们能帮助我。

提前致谢！

ps：英语不是我的主要语言。 :)

Answer 1

是的，使用 CSS，您可以使用“过渡”执行类似的操作，但不像示例中那样具有动画效果，因为 CSS 限制了悬停时可以更改的内容。 据我所知，您不能在悬停元素之前更改元素（如果我错了，请纠正我）

这是一个简单的例子（https://jsfiddle.net/9510a6kj/）：

HTML

<div class="left"></div>
<div class="right"></div>

CSS

.left, .right{
    float:left;
}

.left{
    background: red;
    width: 200px;
    height: 300px;
    transition: width 1s ;
}

.right{
    background: blue;
    width: 300px;
    height: 300px;
    transition: width 1s;
}

.left:hover{
    width: 300px;
}

.left:hover + .right{
    width: 100px;
}

也许这有帮助

Transiton 将“动画”（更多延迟）从宽度 A 到 B 的变化

干杯

Answer 2

嗯，学习更多技能总是很棒，但您甚至可以通过使用 CSS 悬停效果添加悬停效果，甚至无需使用 JS。

一般看起来像：

    #img1 {  
    width: 50px;  
    height: 50px;      
    }   

    #img1:hover {   
    width: 75px;       
    height: 75px;    
    }  

有点懒惰或笨拙的做法，但效果很好，而且在学习发展的早期阶段要容易得多。 您还可以使用像这样的 jquery 插件（只需将文本更改为图像并编辑属性）

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover http://www.geekality.net/2010/08/26/jquery-nice-and-smooth-hover-effect/