当鼠标悬停时,如何将Image放置在其父div之外 [英] how to put Image outside of its parent div when hover
问题描述
我有一个可滚动的 div
和一些 img
元素。我为图片添加了 width
和 height
的悬停效果。它工作正常,但图像卡在 #scroller
div
。我想让图片从滚动 div 出来,当鼠标在它上面。我怎样才能做到这一点 ?
I have a scrollable div
with some img
elements in it. I have added a hover effect of width
and height
for images. It works fine, but image get stuck in #scroller
div
. I want that the image get out of scroller div
when mouse over it. How can I do that ?
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: b
<div id="scroller">
<img/>
<img/>
<img/>
<img/> ...and some more images
</div>
我没有尝试任何东西,因为我不知道。
I didn't try anything because I have no idea.
推荐答案
如果您打算仅使用CSS,一种方法可能是将图片在悬停时的位置更改为绝对。
If you are planning to use CSS only, one approach could be to change the position of the image on hover to absolute.
查看此示例: 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来达到更好的效果。
Otherwise you could use javascript to have achieve better results.
这篇关于当鼠标悬停时,如何将Image放置在其父div之外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!