I have the following layout: http://jsfiddle.net/yHPTv/2487/
What I need to do is hide the .hidden
class to the right edge of the .block
class and have it only appear (by sliding in) on hover to the current position you see it in the JSFiddle.
The issue is, the .hidden
class is of variable-width, meaning that the content inside it ( ABCDEFGHIJKL
) can be completely different, sometimes shorter, sometimes longer.
How would I solve this?
Edit: To clarify what I mean by hiding it to the right edge of the .block
class, I mean like this , except it wouldn't be shown.
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;
}
To solve my own question, I simply removed right: 0
from .block .hidden
and put 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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.