在悬停时更改div宽度的最佳方法
这个公文包网站的创建者是如何制作出如此酷炫的图像效果的？http://www.adhamdannaway.com/
我目前正在训练自己学习更高级的东西，但我在这个效果上遇到了麻烦。
我做的方法是制作一个宽度为1280px的容器(1280px是img的宽度)。制作了两张图片，一张是彩色的，另一张是黑白的。2div的宽度为50%，向左浮动，浮动战斗。右边的显示不正确，所以我使用了这个: background-position: top right，它起作用了。即使在更大的屏幕尺寸上，它们的居中也是完美的。但问题出在这里。当我悬停在左边的div时，div的宽度是100%，我该怎么做呢？对于另一个div也是如此。
我知道我可以使用#div:hover，然后宽度100%，并修复图像在z-index上的问题，但这只在我悬停时发生，而不是当我解除悬停时。显而易见，因为它开始了:悬停。但我目前不知道如何以更好/正确的方式做到这一点。
我把代码放在jsfiddle.net/aLyde6pa/上，但由于某种原因它不能工作。
我可能已经解释得太多了，但我希望你们能帮助我。
提前感谢！
附言:英语不是我的主要语言。:)
回答 2
Stack Overflow用户
发布于 2015-09-11 02:44:54
是的，使用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的变化
干杯
Stack Overflow用户
发布于 2015-09-11 02:32:30
嗯，学习更多的技能总是很棒的，但你甚至可以在不使用JS的情况下，通过使用CSS悬停效果来添加悬停效果。
通常看起来像这样：
#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/
https://stackoverflow.com/questions/32509015
复制相似问题
腾讯云开发者
