小贝子编程

如何在不影响其他 div 的情况下放大鼠标输入(或悬停)



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

我运行你的代码。问题是，当你放大一个div时，其他人会移动，甚至使最后一个lind饲料，原因是你使这个组的每个项目都position:relative;所以我认为首先你应该放另一个div 来包含你的item-block，在这个div 集合中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 {
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 的大小。

顺便说一下，在悬停时，如果你想让项目块覆盖其他人，你应该设置比其他的更大的z-index。

最后，你的item-block是绝对的，所以父母的大小将是0，确保你的.four-items-block有一个width。

首先包括 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>

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

我会使用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/

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium