Question

我正在使用stwiter bootstrap来设计我的多产品产品页面，所以我在bootstrap freamwork中使用流体布局来设计一个盒子产品而且这么小，我在悬挂在一个盒子产品时我不愿意这个盒子而不是啤酒和位置所有方框的顶部，见下图，可以提供任何帮助，非常感谢

这是我的css和html

    <div class="box-product row-fluid">
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="MacBook" src=""></a></div>
            <div class="name"><a href="">MacBook</a></div>
            <div class="price">
                $589.50                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
  </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="iPhone" src=""></a></div>
            <div class="name"><a href="">iPhone</a></div>
            <div class="price">
                $120.68                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
            </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Samsung Galaxy Tab 10.1" src=""></a></div>
            <div class="name"><a href="">Samsung Galaxy Tab 10.1</a></div>
            <div class="price">
                $236.99                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
           </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
            </div>

    </div>
           <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
             </div>

    </div>
              <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
  </div>

    </div>

我的css在下面

   .box-product {
width: 100%;
position: relative;
    }
   .box-product > div {
vertical-align: top;
margin-bottom: 20px;
position: relative;
box-sizing: border-box;
    }
    .box-product > div:hover{
 z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius:5px;
box-sizing:border-box;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-o-box-shadow:0 0 30px rgba(0, 0, 0, 0.2);
border: 5px solid #FFA500;
    }
     .box-product .image {
display: block;
margin-bottom: 0px;
    }

我希望当悬停在产品包装盒中时，这个盒子会安排前面的所有和宽度如此大 image like to my mean

Answer 1

您可以使用scale() Method。

实施例

  style:hover {
      ...
      transform: scale(2);
     -moz-transform:scale(2); 
     -webkit-transform:scale(2);
     -o-transform:scale(2);
     -ms-transform: scale(2);
      ...
  }

比例（2） - 当鼠标悬停在div上时，它会将div的大小增加到原始大小的两倍。
您可以根据自己的选择更改这些值

我可以在悬停时设置盒子模型宽度吗？

1 个答案: