CODEWITHSUNDEEP
jqueryhtmlcss
Alina Babycheva
Alina Babycheva

Reputation: 73

How can I enlarge div onmouseenter(or hover) without affecting other divs?

I have 12 divs and each 4 are grouped. I want to show more info on them on hover. Here is my code (I'll show only 4 first divs as they are the same): 

$(document).ready(function() {
      $(".item-block").mouseover(function() {
        $(this).find("h6").addClass('active-elements');
        $(this).find(".size").addClass('active-elements');
        $(this).find(".buy-button").addClass('active-elements');
        $(this).addClass("active-item");
      });
      $(".item-block").mouseleave(function(){
        $(this).removeClass("active-item");
        $(this).find("h6").removeClass("active-elements");
        $(this).find(".size").removeClass("active-elements");
        $(this).find(".buy-button").removeClass("active-elements");
      });
   });
.item-block {
  overflow: hidden;
  margin-right: 2%;
  width: 22%;
  float: left;
  margin-top: 3%;
  position: relative;
  z-index: 0;
}

.item-block img {
  height: 320px;
  width: 100%;
}

h5 {
  margin-top: 2%;
  margin-bottom: 1%;
  text-transform: uppercase;
}

.four-items-block {
  float: left;
  margin-left: 6%;
}

.price {
  display: block;
}

.sale {
  color: red;
}

small {
  color: grey;
}

h6 {
  position: relative;
  z-index: 2;
  float: left;
  margin-top: 6%;
  display: none;
}

.size {
  position: relative;
  z-index: 2;
  margin-top: 4%;
  float: left;
  background-color: white;
  border: 1px solid black;
  padding: 1% 6%;
  cursor: pointer;
  display: none;
}

.size:first-of-type {
  margin-left: 7%;
}

.buy-button {
  background-color: black;
  padding: 4% 44%;
  margin-top: 2%;
  color: white;
  display: none;
}

.active-item {
  background-color: white;
  padding: 20px;
}

.active-elements {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="four-items-block">
  <div class="item-block">
    <img src="images/1.png" alt="product" />
    <div class="item-info clearfix">
      <h5 class="item-name">Платье diesel</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/2.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt g-star raw</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block clearfix">
    <img src="images/3.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">extra mini summer by oleandr scott
      </h5>
      <span class="price">$32 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/4.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt pepe jeans black one</h5>
      <span class="price">$2 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
</div>

Upvotes: 0

Views: 99

Answers (4)

Gerard
Gerard

Reputation: 15796

I would use CSS to make the extra information available.

$(".item-block").mouseover(function() {
  $(this).find(".extra-info").addClass('active');
})
$(".item-block").mouseleave(function() {
  $(this).find(".extra-info").removeClass("active");
})

See for a fiddle here: https://jsfiddle.net/beekvang/8x3nfc6s/

Upvotes: 0

Vijay Vj
Vijay Vj

Reputation: 367

$(document).ready(function() {
      $(".item-block").mouseover(function() {
        $(this).find("h6").addClass('active-elements');
        $(this).find(".size").addClass('active-elements');
        $(this).find(".buy-button").addClass('active-elements');
        $(this).addClass("active-item");
      });
      $(".item-block").mouseleave(function() {
        $(this).removeClass("active-item");
        $(this).find("h6").removeClass("active-elements");
        $(this).find(".size").removeClass("active-elements");
        $(this).find(".buy-button").removeClass("active-elements");
      });
});
.item-block {
  overflow: hidden;
  margin-right: 2%;
  width: 22%;
  float: left;
  margin-top: 3%;
  position: relative;
  z-index: 0;
}

.item-block img {
  height: 320px;
  width: 100%;
}

h5 {
  margin-top: 2%;
  margin-bottom: 1%;
  text-transform: uppercase;
}

.four-items-block {
  float: left;
  margin-left: 6%;
}

.price {
  display: block;
}

.sale {
  color: red;
}

small {
  color: grey;
}

h6 {
  position: relative;
  z-index: 2;
  float: left;
  margin-top: 6%;
  display: none;
}

.size {
  position: relative;
  z-index: 2;
  margin-top: 4%;
  float: left;
  background-color: white;
  border: 1px solid black;
  padding: 1% 6%;
  cursor: pointer;
  display: none;
}

.size:first-of-type {
  margin-left: 7%;
}

.buy-button {
  background-color: black;
  padding: 4% 44%;
  margin-top: 2%;
  color: white;
  display: none;
}

.active-item {
  background-color: white;
  padding: 20px;
}

.active-elements {
  display: inline;
}
<div class="four-items-block">
  <div class="item-block">
    <img src="images/1.png" alt="product" />
    <div class="item-info clearfix">
      <h5 class="item-name">Платье diesel</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/2.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt g-star raw</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block clearfix">
    <img src="images/3.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">extra mini summer by oleandr scott
      </h5>
      <span class="price">$32 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/4.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt pepe jeans black one</h5>
      <span class="price">$2 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
</div>

Upvotes: 0

Enivia
Enivia

Reputation: 192

I run your code.The problem is that when you enlarge a div others will move and even makes the last one lind feed, and the reason is that you make every item of this group position:relative; So I think first you should put another div to include your item-block, and inside this div set item-block position absolute,

<div class="item">
<div class="item-block">
    <img src="images/1.png" alt="product" />
    <div class="item-info clearfix">
        <h5 class="item-name"> diesel</h5>
        <span class="price">$5 520</span>
        <h6>Size</h6>
        <button class="size">1</button>
        <button class="size">2</button>
        <button class="size">3</button>
        <button class="size">4</button>
        <a href="" class="buy-button">Buy</a>
    </div>
</div>

and set the parent div's css like your item-block:

.item {
display: inline-block;
overflow: hidden;
width: 16%;
height: 100%;
margin-right: 2%;
margin-top: 3%;
z-index: 0;

}

.item-block {
overflow: hidden;
width: 16%;
position: absolute;
z-index: 2;

}

this will make that whatever you change your item-block style will not effect its parent div's size.

By the way, when getting hover, if you want to make the item-block cover others, you shoul set z-index bigger than others.

At last, your item-block is absolute, so parents's size is going to be 0, make sure your .four-items-block have a width.

Upvotes: 1

Nimish
Nimish

Reputation: 1016

Firstly include the jQuery to make it work. Secondly I notice that you have not closed document.ready block so check this snippet.

$(document).ready(function() {
      $(".item-block").mouseover(function() {
        $(this).find("h6").addClass('active-elements');
        $(this).find(".size").addClass('active-elements');
        $(this).find(".buy-button").addClass('active-elements');
        $(this).addClass("active-item");
      })
      $(".item-block").mouseleave(function() {
        $(this).removeClass("active-item");
        $(this).find("h6").removeClass("active-elements");
        $(this).find(".size").removeClass("active-elements");
        $(this).find(".buy-button").removeClass("active-elements");
      })
      })
.item-block {
  overflow: hidden;
  margin-right: 2%;
  width: 22%;
  float: left;
  margin-top: 3%;
  position: relative;
  z-index: 0;
}

.item-block img {
  height: 320px;
  width: 100%;
}

h5 {
  margin-top: 2%;
  margin-bottom: 1%;
  text-transform: uppercase;
}

.four-items-block {
  float: left;
  margin-left: 6%;
}

.price {
  display: block;
}

.sale {
  color: red;
}

small {
  color: grey;
}

h6 {
  position: relative;
  z-index: 2;
  float: left;
  margin-top: 6%;
  display: none;
}

.size {
  position: relative;
  z-index: 2;
  margin-top: 4%;
  float: left;
  background-color: white;
  border: 1px solid black;
  padding: 1% 6%;
  cursor: pointer;
  display: none;
}

.size:first-of-type {
  margin-left: 7%;
}

.buy-button {
  background-color: black;
  padding: 4% 44%;
  margin-top: 2%;
  color: white;
  display: none;
}

.active-item {
  background-color: white;
  padding: 20px;
}

.active-elements {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="four-items-block">
  <div class="item-block">
    <img src="images/1.png" alt="product" />
    <div class="item-info clearfix">
      <h5 class="item-name">Платье diesel</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/2.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt g-star raw</h5>
      <span class="price">$5 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block clearfix">
    <img src="images/3.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">extra mini summer by oleandr scott
      </h5>
      <span class="price">$32 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
  <div class="item-block">
    <img src="images/4.png" alt="product" />
    <div class="item-info">
      <h5 class="item-name">skirt pepe jeans black one</h5>
      <span class="price">$2 520</span>
      <h6>Size</h6>
      <button class="size">1</button>
      <button class="size">2</button>
      <button class="size">3</button>
      <button class="size">4</button>
      <a href="" class="buy-button">Buy</a>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions