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

user26697 发表于 Dev

用户名

我想创建下面两个图像中所示的悬停效果

在此处输入图片说明

在下面的两个图像中，显示了我如何在此SO链接上给出的示例的帮助下实现了

在此处输入图片说明

如您所见，当将鼠标悬停在一个图像上时，第三个图像的位置已更改，

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

这是我的jsfiddle代码

的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>

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