0

我使用 stwiter bootstrap 来设计我的产品页面与多产品，所以我在 bootstrap framwork 中使用流体布局来设计一个盒子产品，而且这么小，当我将鼠标悬停在一个盒子产品中时，这个盒子比拉格和位置最重要盒子，见下图，有什么帮助，非常感谢

这是我的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;
    }

我想当悬停在产品框时，这个框会安排在所有和宽度的前面，所以更大的 图像就像我的意思

4

1 回答 1

0

您可以使用scale() 方法。

例子

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

  • Scale(2) - 当鼠标悬停在 div 上时，它将 div 的大小增加到其原始大小的两倍。

  • 您可以根据自己的选择更改这些值

于 2013-06-11T06:52:56.713 回答