javascript - 如何固定位置元素，以便在将鼠标悬停在一个元素上时，其他两个元素应保持在同一位置

Question

我想创建如下前两张图片所示的悬停效果

在下面的两张图片中显示了我是如何借助在此 SO link 上给出的示例来实现的

正如您在将鼠标悬停在一张图片上时看到的，第三张图片的位置正在发生变化，

如何在悬停在一张图片上时使两张图片位置固定？如前两张图片所示

这是我的 jsfiddle code

CSS

.wrap{
    width:1360px;
    margin:0px;
    padding:0px;

}
.con{
    display:inline-block;
    width:453px;
    height:453px;
    position:relative;
    background:url(images/new-psd_22.jpg) no-repeat;
    opacity:0.5;
    transition:0.5s;
    transition-timing-function: linear;
    margin:0px;
    box-sizing:border-box;
    border-left:#FFF 1px solid;


}
.hover{
    text-align:center;
    color:#fff;
    display:inline-block;
   width:453px;
    height:453px;
    position:absolute;
    z-index:2;
    background-color:rgba(0,0,0,0.5);
    transition:0.5s;
    margin:0px;
    box-sizing:border-box;
     display:inline-block;
}
.con:hover{

      text-align:center;
    color:#fff;
    opacity:10;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
    height:400px;
    width:570px;
    margin:0px;
}
.con:hover span{

      text-align:center;
    color:#fff;
    opacity:0;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
    height:400px;
    width:570px;
    margin:0px;
}

正文

<ul class="wrap">
<li class="con" style=" float:left;" >
    <span class="hover"  >Hover Me</span>
</li>
    <li class="con"  style=" float:left;" >
    <span class="hover" >Hover Me</span>
</li>

 <li class="con" style=" float:left;" >
    <span class="hover" >Hover Me</span>
</li>

<ul>

Answer 1

如果旧版浏览器支持不是问题，您可以使用 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;
}

Demo