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

Question

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

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

我的做法是制作一个宽度为1280px的容器（1280px是img的宽度）。制作了 2 张图像，一张是彩色的，另一张是黑白的。 2 divs width a width 50% and float left, float fight.正确的看起来不正确，所以我使用了这个：background-position: top right 并且它起作用了。即使在更大的屏幕尺寸上，它们也能完美居中。但问题就出在这里。当我将鼠标悬停在左侧 div 时，我该如何做到这一点 div 的宽度变为 100%。另一个 div 也是如此。

我知道我可以通过#div:hover 然后将宽度设置为 100% 并修复图像在 z-index 上方的问题，但这只会在我悬停时发生，但不会在我悬停时发生。很明显，因为它在 :hover 上。但我目前不知道如何以 better/right 方式执行此操作。

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

我可能解释得太多了，但我希望你们能帮助我。

提前致谢！

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

Answer 1

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

大体看起来像这样：

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

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

有点懒惰或 hacky 的方式，但它工作正常，并且在学习开发的早期阶段更容易。您也可以使用像这样的 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/

Answer 2

是的，使用 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 将 "animate"（更多延迟）宽度从 A 变为 B

干杯

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

Best way to change div width on hover

html

css

animation

hover

effect