CODEWITHSUNDEEP
jquerycsshoverpositioning
rinatoptimus
rinatoptimus

Reputation: 421

How to expand element to the left?

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

Answers (2)

Leila
Leila

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

MHD Alaa Alhaj
MHD Alaa Alhaj

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

Related Questions