在悬停时更改 div 宽度的最佳方法

Question

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

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

我这样做的方法是制作一个宽度为 1280 像素的容器（1280 像素是 img 的宽度）。制作了 2 张图片，一张是彩色的，另一张是黑白的。2 divs width a width 50% and float left, float 打架。正确的没有出现，所以我使用了这个：背景位置：右上角并且它起作用了。即使在更大的屏幕尺寸上，它们也能完美地居中。但问题出在这里。当我将鼠标悬停在左侧 div 时，我该如何做到这一点，div 的宽度为 100%。另一个 div 也是如此。

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

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

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

提前致谢！

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

Answer 1

是的，使用 CSS，您可以使用“Transition”执行类似的操作，但不会像示例中那样动画化，因为 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 的变化

干杯