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

Question

关闭。这个问题是 opinion-based .它目前不接受答案。

---

想要改进这个问题吗？ 更新问题，以便 editing this post 提供事实和引用来回答它.

关闭 7 年前。

Improve this question

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

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

我这样做的方法是制作一个宽度为 1280px 的容器(1280px 是 img 的宽度)。制作了 2 张图像，一张是彩色的，另一张是黑白的。 2 个 div 宽度为 50% 的宽度并向左浮动， float 战斗。正确的看起来不正确，所以我使用了这个:背景位置:右上角并且它起作用了。即使在更大的屏幕尺寸上，它们也能完美居中。但问题就在这里。我怎样才能做到这一点，当我将左 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 的变化

干杯