javascript - 在右边隐藏可变宽度元素

Question

我有以下布局: 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;
}

Answer 1

为了解决我自己的问题，我只是从 .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%;
}