Question

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

enter image description here

在下面的两张图片中显示了我是如何通过此SO link

上给出的示例帮助实现的

enter image description here

正如您在悬停在一张图像上时所看到的那样，第三张图像位置正在改变，

如何在将鼠标悬停在一张图像上时固定两张图像？如上面第一张图像所示

这是我的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

更新您的.wrap课程，如下所示。同时删除不需要的float:left样式。

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

DEMO

Answer 2

只需给ul更多宽度（我添加了额外的1000px）。您可以使用overflow: hidden;添加包装器。这是JSFiddle。

Answer 3

如果旧浏览器支持不是问题，可以使用CSS3弹性框。

*{
  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;
}

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

3 个答案:

Demo