如何将元素展开到左边？

Question

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

尝试的位置：绝对;顶部：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>