我有以下布局: http://jsfiddle.net/yHPTv/2487/
我需要做的是将 .hidden
类隐藏到 .block
类的右边缘,让它只在鼠标悬停时出现(通过滑入)您在 JSFiddle 中看到的当前位置。
问题是,.hidden
类是可变宽度的,这意味着其中的内容 (ABCDEFGHIJKL
) 可以完全不同,有时更短,有时更长.
我该如何解决这个问题?
编辑:为了阐明我的意思,将它隐藏到 .block
类的右边缘,我的意思是 like this ,除非它不会显示。
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
}
最佳答案
为了解决我自己的问题,我只是从 .block .hidden
中删除了 right: 0
并放置了 left: 100%
。
http://jsfiddle.net/yHPTv/2488
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
}
关于javascript - 在右边隐藏可变宽度元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26515148/