当鼠标悬停时,如何将Image放置在其父div之外 [英] how to put Image outside of its parent div when hover

查看:72
本文介绍了当鼠标悬停时,如何将Image放置在其父div之外的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个可滚动的 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆