如何将元素展开到左侧？

Question

有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>

试过的位置是：绝对的;顶部：0;右：0; 试图将块换成固定宽度的div。无法找到相似的例子。

Answer 1

您可以使用以下方法：

$(".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>

Answer 2

试试这个片段，这是你在找什么？

$(".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>