如何在不影响其他div的情况下扩大div onmouseenter（或悬停）？
[英]How can I enlarge div onmouseenter(or hover) without affecting other divs?
问题描述
I have 12 divs and each 4 are grouped. 
我有12个div，每个4个都是分组的。 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): 这是我的代码（由于相同，我只会显示前四个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 个解决方案
解决方案1
1 2017-05-14 11:53:19
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; 我运行您的代码。问题是，当您放大div时，其他人会移动，甚至进行最后一个lind提要，原因是您使该组position:relative;每一项都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来包含您的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>
and set the parent div's css like your item-block: 并像您的item-block一样设置父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;
} }
this will make that whatever you change your item-block style will not effect its parent div's size. 这样一来，无论您如何更改item-block样式，都不会影响其父div的大小。
By the way, when getting hover, if you want to make the item-block cover others, you shoul set z-index bigger than others. 顺便说一句，当悬停时，如果要使项目栏覆盖其他，则应将z-index设置为大于其他值。
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 . 最后，您的item-block是绝对的，因此父母的尺寸将为0，请确保您的.four-items-block具有width 。
解决方案2
0 2017-05-14 10:59:01
Firstly include the jQuery to make it work. 首先包括jQuery以使其工作。 Secondly I notice that you have not closed document.ready block so check this snippet. 其次，我注意到您尚未关闭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>
解决方案3
0 2017-05-14 12:55:41
$(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>
解决方案4
0 2017-05-14 14:04:23
I would use CSS to make the extra information available. 我将使用CSS使更多信息可用。
$(".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/ 在这里查看小提琴： https : //jsfiddle.net/beekvang/8x3nfc6s/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在不影响周围div的情况下按比例放大父div并在悬停时显示隐藏的子div - How to scale up parent div and show hidden child div on hover without affecting surrounding divs
放置弹出式div而不影响其他div的位置 - Placing a popup div without affecting other divs positions
如何用其他div填充div？ - How can I fill a div with other divs?
如何在不影响其他元素的情况下扩展DIV - How to expand a DIV without affecting other elements
如何修复 onmouseLeave 在 DIV 上触发 onmouseEnter - How can I fix onmouseLeave triggering onmouseEnter on DIV
如何在悬停时放大 Slick Slider 中的幻灯片项目？ - How can I enlarge an slide item in Slick Slider on hover?
css：在悬停时展开div而不替换其他div - css: expand div on hover without displacing other divs
如何在其他div内激活div的悬停？ - How can I activate the hover of a div inside of other div?
问题分隔 div，影响其他 div 的类 - Issue separating divs, class affecting other div
div将其他div悬停 - Div push other divs on hover
相关标签