Reputation: 421
There are 3 blocks that expand to the right. How to make the 3rd element expand to the left and avoid moving block itself (element must stay in its place)?
$(".block").hover(function() {
$(this).toggleClass('expanded');
});
.block {
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
display: inline-block;
position: absolute;
}
.test {
width: 100px;
height: 100px;
border: 1px solid red;
}
.left, .right {
display: inline-block;
}
.right {
background-color: red;
}
.expanded {
width: 220px;
position: absolute;
z-index: 10;
}
/* .block:hover {
width: 220px;
} */
.block-second {
left: 120px;
}
.block-third {
left: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="test left">
<p>first</p>
</div>
<div class="test right">
<p>111</p>
</div>
</div>
<div class="block block-second">
<div class="test left">
<p>second</p>
</div>
<div class="test right">
<p>222</p>
</div>
</div>
<div class="block block-third">
<div class="test left">
<p>third</p>
</div>
<div class="test right">
<p>333</p>
</div>
</div>
Tried position:absolute;top:0;right:0; Tried to wrap blocks to a div with fixed width. Cannot find examples alike.
Upvotes: 0
Views: 227
Reputation: 232
You can use the following:
$(".block").hover(function() {
$(this).toggleClass('expanded');
});
.block {
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
display: inline-block;
position: absolute;
}
.test {
width: 100px;
height: 100px;
border: 1px solid red;
}
.left, .right {
display: inline-block;
}
.right {
background-color: red;
}
.expanded {
width: 220px;
position: absolute;
z-index: 10;
}
.block-third.expanded{
left:120px;
}
/* .block:hover {
width: 220px;
} */
.block-second {
left: 120px;
}
.block-third {
left: 240px;
}
.block-third .right{
display:none;
}
.block-third.expanded .right{
display:inline-block;
}
.block-third.expanded .left{
margin-left: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="test left">
<p>first</p>
</div>
<div class="test right">
<p>111</p>
</div>
</div>
<div class="block block-second">
<div class="test left">
<p>second</p>
</div>
<div class="test right">
<p>222</p>
</div>
</div>
<div class="block block-third">
<div class="test right">
<p>333</p>
</div>
<div class="test left">
<p>third</p>
</div>
</div>
Upvotes: 1
Reputation: 3223
Try this snippet, is this what you are looking for ?
$(".block").hover(function() {
$(this).toggleClass('expanded');
});
$(".block.block-third").hover(function() {
$(this).toggleClass('third');
});
.block {
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
display: inline-block;
position: absolute;
}
.test {
width: 100px;
height: 100px;
border: 1px solid red;
}
.left, .right {
display: inline-block;
}
.right {
background-color: red;
}
.expanded:not(.block-third) {
width: 220px;
position: absolute;
z-index: 10;
}
.expanded.third .right {
left: 10px;
position: absolute;
text-align: left;
}
.expanded.third {
width: 220px;
z-index: 10;
right: 0;
text-align: right;
}
.block-second {
left: 120px;
}
.block-third {
left: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="test left">
<p>first</p>
</div>
<div class="test right">
<p>111</p>
</div>
</div>
<div class="block block-second">
<div class="test left">
<p>second</p>
</div>
<div class="test right">
<p>222</p>
</div>
</div>
<div class="block block-third">
<div class="test left">
<p>third</p>
</div>
<div class="test right">
<p>333</p>
</div>
</div>
Upvotes: 0