如何在不影响其他div的情况下扩大div onmouseenter（或悬停）？

时间：2017-05-14 10:42:57

标签： jquery html css

我有12个div，每个4个被分组。我想在悬停时显示更多关于它们的信息。这是我的代码（我只会显示4个第一个div，因为它们是相同的）：

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

4 个答案:

答案 0 :(得分：1)

我运行你的代码。问题是，当你放大div时，其他人会移动甚至做出最后一个lind feed，原因是你创建了这个组中的每个项目position:relative; 所以我想首先你应该把另一个div包含在你的item-block中，并且在div set item-block位置绝对，

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

并将父div的css设置为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;

}

这将使你改变item-block样式不会影响其父div的大小。

顺便说一下，当你悬停时，如果你想让item-block覆盖别人，你应该把z-index设置得比其他人大。

最后，您的item-block是绝对的，因此父母的大小将为0，请确保.four-items-block有width。

答案 1 :(得分：0)

首先包含jQuery以使其工作。其次，我注意到你还没有关闭document.ready块，所以请检查这个片段。

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

答案 2 :(得分：0)

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

答案 3 :(得分：0)

我会使用CSS来提供额外的信息。

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

请点击此处查看：https://jsfiddle.net/beekvang/8x3nfc6s/

相关问题
最新问题