Javascript 如何定位元素，使悬停在一个元素上时，其他两个元素应保持在同一位置

我想创建悬停效果，如下面前两幅图片所示

在下面的两幅图中，我展示了我是如何借助本文给出的示例实现的

正如您在一幅图像上悬停时所看到的，第三幅图像的位置正在更改

如何使两幅图像在一幅图像上悬停时的位置固定？如前两幅图像所示

这是我的名片

css

身体

盘旋我


盘旋我


盘旋我

更新你的

.wrap

类，如下所示。同时删除样式上不需要的

float:left

.wrap{
width:100%;
margin:0px;
padding:0px;
white-space:nowrap;
}

---

只要给

ul

更多的宽度（我增加了额外的1000px）。您可以使用

overflow:hidden添加包装器。以下是。
如果旧版浏览器支持不是问题，您可以使用CSS3 flex box

*{
  margin:0;
  padding:0;
}
  html,body{
  height:100%;
}
.wrap{
  display:flex;
  width:100%;
  height:100%;
  text-align:center;
  list-style-type:none;
  white-space:nowrap;
  overflow:hidden;
}
.con{
  position:relative;
  box-sizing:border-box;
  flex:1 .5;
  background:url(images/new-psd_22.jpg) no-repeat;
  opacity:0.5;
  margin:0px;
  border-left:#FFF 1px solid;
  transition: all 0.5s linear;
}
.hover{
  display:inline-block;
  box-sizing:border-box;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  text-align:center;
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  transition:0.5s;
}
.con:hover{
  flex-grow:1.5;
  text-align:center;
  color:#fff;
  opacity:10;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}
.con:hover span{
  text-align:center;
  color:#fff;
  opacity:0;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}

您的主要问题是，您正在更改悬停时的元素宽度和高度。。所以其他的东西都会移动。。如果你希望东西在悬停时保持在原位，不要改变它们的大小。这就是你要寻找的方向吗？不，伙计。图像应该变大变小，但是图像之间的空白是我不想要的。你能访问这个“”网页并帮助我如何产生这种效果吗。我没有时间解释为什么我不会像他们那样做。。（不太好用，有点颠簸）。。但是这里有一个使用背景图像的起点。。祝你好运谢谢你的回答，但这不是正确的解决方案。谢谢，这是可行的，但我确实希望在这些图片之间留有任何空间。所以我能得到一些解决方案吗？你的回答真的帮了我的忙。@user26697很高兴它帮了我的忙…你可以阅读更多关于flex布局的信息…可能会有用：）和bro如果我在不同的块中有不同的图像，那么如何显示它？？
.wrap{
width:100%;
margin:0px;
padding:0px;
white-space:nowrap;
}

*{
  margin:0;
  padding:0;
}
  html,body{
  height:100%;
}
.wrap{
  display:flex;
  width:100%;
  height:100%;
  text-align:center;
  list-style-type:none;
  white-space:nowrap;
  overflow:hidden;
}
.con{
  position:relative;
  box-sizing:border-box;
  flex:1 .5;
  background:url(images/new-psd_22.jpg) no-repeat;
  opacity:0.5;
  margin:0px;
  border-left:#FFF 1px solid;
  transition: all 0.5s linear;
}
.hover{
  display:inline-block;
  box-sizing:border-box;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  text-align:center;
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  transition:0.5s;
}
.con:hover{
  flex-grow:1.5;
  text-align:center;
  color:#fff;
  opacity:10;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}
.con:hover span{
  text-align:center;
  color:#fff;
  opacity:0;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}