隱藏右側的可變寬度元素

Question

我有以下布局： http : //jsfiddle.net/yHPTv/2487/

我需要做的是將.hidden類隱藏在.block類的右邊緣，並使其僅在懸停時（通過滑入）顯示到您在JSFiddle中看到的當前位置。

問題是， .hidden類的寬度可變，這意味着其中的內容（ ABCDEFGHIJKL ）可以完全不同，有時更短，有時更長。

我該如何解決？

編輯：通過將其隱藏在.block類的右邊緣來弄清楚我的意思，我的意思是這樣 ，除非它不會顯示。

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%;
}