悬停时如何将图像放在其父 div 之外答案

【问题标题】：how to put Image outside of its parent div when hover悬停时如何将图像放在其父 div 之外
【发布时间】：2014-07-09 22:34:15
【问题描述】：

我有一个可滚动的div，其中包含一些img 元素。我为图像添加了width 和height 的悬停效果。它工作正常，但图像卡在#scrollerdiv。我希望图像在鼠标悬停时从滚动器div 中退出。我怎样才能做到这一点？

CSS：

#scroller {
    width:100%;
    border:1px solid black;
    white-space:nowrap;
    height:130px;
    display:inline-block;
    overflow-x:scroll;
    overflow-y:hidden;
}
img {
    width:128px;
    height:128px;
}
img:hover {
    width : 192px;
    height:192px;
}

HTML：

<div id="scroller">
    <img/>
    <img/>
    <img/>
    <img/> ...and some more images
</div>

我没有尝试任何东西，因为我不知道。

【问题讨论】：

尝试溢出：#scroller 可见？

标签： html css hover

【解决方案1】：

如果您打算仅使用 CSS，一种方法是将悬停时图像的位置更改为绝对位置。

看这个例子：http://jsfiddle.net/Vn8M6/3/

#scroller {
    width:100%;
    height:100%;
    border:1px solid black;
    white-space:nowrap;
    height:130px;
    display:inline-block;
    overflow-x:scroll;
    overflow-y:hidden;
}

img {
    width:128px;
    height:128px;
    transition: ease-in-out 0s;  
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
     z-index:1;
    background-color:grey;
}

img:nth-child(2) {
    background-color:yellow;
     z-index:2;
}

img:nth-child(3) {
    background-color:red;
    z-index:3;
}

img:nth-child(4) {
    background-color:blue;
     z-index:4;
}

img:hover {
    width : 192px;
    height:192px;
    position:absolute;
    top:0;    
}

否则你可以使用 javascript 来获得更好的结果。

【讨论】：

好的，很高兴它适合您的需求。我的荣幸。 :)

【解决方案2】：

这行不通，因为你定义了：

overflow-x:scroll; overflow-y:hidden;

删除这些或使用样式属性“绝对”设置您的图像，并将它们定位为“右、上、左、下”以正确放置！

问候

【讨论】：

【解决方案3】：

您需要将 CSS 更改为 on hover 允许图像超出父级范围。

#scroller:hover {
    overflow-x:scroll;
    overflow-visible;
}

【讨论】：

【解决方案4】：

你可以试试-

 #scroller:hover {
    overflow-x:scroll;
    overflow-y:visible;
    height:100%;
 }

JSFIDDLE

【讨论】：