隐藏右侧的可变宽度元素

Hide a variable-width element off to the right

本文关键字：元素 隐藏      更新时间：2023-09-26

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

为了解决我自己的问题，我简单地从.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%;
}
相关文章：