Hover 更改其下方项目的悬停位置

Question

这是图片的代码

<div id="content">
<div id="boyset">
    <fieldset>
    <legend>Baby Boy Set</legend>
    <ul>
    <li><p>2-Piece Shirt & Pant</p>
    <a href="2-Piece Shirt & Pant.html"><img src="images/11.jpg"/></a><br/><p>$12.00</p></li>
    <li><p>2-Piece Top & Jeans</p><a href="2-Piece Top & Jeans.html"><img src="images/12.jpg"/></a><br/><p>$26.00</p></li>
    <li><p>3-Piece</p><a href="3-Piece.html"><img src="images/13.jpg"/></a><br/><p>$15.00</p></li>
     <li><p>2-Piece Top & Legging</p><a href="2-Piece Top & Legging.html"><img src="images/14.jpg"/></a><br/><p>$24.00</p></li>
     <li><p>2-Piece Top & Legging</p><a href="2-Piece Top & Legging.html"><img src="images/15.jpg"/></a><br/><p>$24.00</p></li>
     <li><p>2-Piece Top & Legging</p><a href="2-Piece Top & Legging.html"><img src="images/16.jpg"/></a><br/><p>$24.00</p></li> 
     <li><p>2-Piece Top & Legging</p><a href="2-Piece Top & Legging.html"><img src="images/17.jpg"/></a><br/><p>$24.00</p></li>
     <li><p>2-Piece Top & Legging</p><a href="2-Piece Top & Legging.html"><img src="images/18.jpg"/></a><br/><p>$24.00</p></li>   </ul>
    </fieldset>
    </div>
</div>

这是 CSS 代码

#content{
    margin:auto;
    margin-top:50px;
    height:1065px;
    width:1200px;
    background-color:#FFFFFF;
    border:5px solid #404A7F;
    border-radius:10px;}


#boyset fieldset{
    width:1100px;
    height:980px;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:30px;
    margin-bottom:30px;
    font-family:Century Gothic;
    font-size:20px;
    font-weight:bold;
    color:#404A7f;}

#boyset ul{
    list-style-type:none;}

#boyset ul li{
    float:left;
    margin-right:10px;
    margin-bottom:200px;
    width:250px;
    height:300px;}

#boyset li img{
    width:200px;
    height:200px;}

#boyset p{
    width:250px;
    text-align:center;}

#boyset p:nth-child(1){
    color:#003;}

#boyset ul li:hover{
    width:250px;
    height:400px;
    border:3px dashed #404A7f;
    background-image:url(images/add_cart.png);
    background-repeat:no-repeat;
    background-position:bottom;}

当鼠标移到第一行的图像上时，它下面的图像会改变它的位置。我希望它能够正确悬停而不改变它下面的图像的位置。

Answer 1

你在

中使用了不同的边距和边框

#boyset ul li:hover{
width:250px;
height:400px;
border:3px dashed #404A7f;
background-image:url(images/add_cart.png);
background-repeat:no-repeat;
background-position:bottom;}

和

#boyset ul li{
float:left;
margin-right:10px;
margin-bottom:200px;
width:250px;
height:300px;}

尝试对边距和边框使用相同的值（对于边框，使用不悬停时不可见的颜色）。

使用浏览器中的工具（如 firebugs 或等效工具）检查您的代码，然后尝试更改值..

Answer 2

谢谢大家我找到了我的代码的解决方案我将CSS代码更改为

#content{
    margin:auto;
    margin-top:50px;
    height:1065px;
    width:1200px;
    background-color:#FFFFFF;
    border:5px solid #404A7F;
    border-radius:10px;}


#boyset fieldset{
    width:1100px;
    height:980px;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:30px;
    margin-bottom:30px;
    padding-right:40px;
    font-family:Century Gothic;
    font-size:20px;
    font-weight:bold;
    color:#404A7f;}

#boyset ul{
    list-style-type:none;}

#boyset ul li{
    float:left;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:30px;
    width:250px;
    height:420px;
    border:2px solid;}


#boyset li img{
    width:250px;
    height:250px;}

#boyset p{
    width:250px;
    text-align:center;}

#boyset p:nth-child(1){
    color:#003;}

#boyset ul li:hover{
    width:250px;
    height:418px;
    border:3px dashed #404A7f;
    background-image:url(images/add_cart.png);
    background-repeat:no-repeat;
    background-position:bottom;}

现在一切正常：D