如何向左扩展元素?
How to expand element to the left?
有 3 个块向右展开。如何让第3个元素向左扩展并避免移动块本身(元素必须留在原处)?
$(".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>
已尝试 position:absolute;上:0;右:0;
试图将块包装成固定宽度的 div。找不到相似的例子。
试试这个片段,这是你要找的吗?
$(".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>
您可以使用以下内容:
$(".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>
有 3 个块向右展开。如何让第3个元素向左扩展并避免移动块本身(元素必须留在原处)?
$(".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>
已尝试 position:absolute;上:0;右:0; 试图将块包装成固定宽度的 div。找不到相似的例子。
试试这个片段,这是你要找的吗?
$(".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>
您可以使用以下内容:
$(".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>