Question

如何在鼠标上调整容器大小？像这儿： http://www.shop.philips.ru/appliances/kofemashiny-chainiki/teapot.html 将鼠标悬停在产品名称或产品图片上时。

<li class="item">
   <div class="item-container no-specprice no-ratings" style="margin: 0px;">
      <div class="item-inner-container" style="width: 154px; height: 169px; padding-bottom: 100px;">
         <div class="product-sku">HD9322/30</div>
         <a class="product-image" title="Чайник Philips HD9322/30" href="http://www.shop.philips.ru/appliances/kofemashiny-chainiki/teapot/chajnik-philips-hd9322-30.html"><img width="135" height="135" alt="Чайник Philips HD9322/30" src="http://www.shop.philips.ru/media/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/h/d/hd9322_30-gal-ru_ru.jpeg"></a>
         <p class="product-name"><a title="Чайник Philips HD9322/30" href="http://www.shop.philips.ru/appliances/kofemashiny-chainiki/teapot/chajnik-philips-hd9322-30.html">Чайник Philips HD9322/30</a>
         </p>
         <div class="ratings hidden-content" style="display: none;">
         </div>
         <p class="availability in-stock" style="position: absolute;">Есть в наличии</p>
         <div class="hidden-content" style="display: none;">
            <!--  <p class="shipping"> --><!-- --><!--</p>-->
            <div class="hidden-content-attr" style="width: 179px; float: none;">
               <p class="main_attr main_attr_teapot_capacity_volume"><strong>Объем чайника:</strong> <span>1,7л</span></p>
               <p class="main_attr main_attr_teapot_case"><strong>Корпус:</strong> <span>Металлический</span></p>
               <p class="main_attr main_attr_body_color"><strong>Цвет корпуса:</strong> <span>Оливково-зеленый</span></p>
            </div>
            <div class="clearer"></div>
         </div>
         <div class="price-box" style="bottom: 51px;">
            <span id="product-price-7137" style="" class="regular-price">
            <span class="price">2&nbsp;590&nbsp;р.</span>                        <span style="display: none;" itemprop="price">2590</span>
            </span>
         </div>
         <div class="actions" style="bottom: 2px;">
            <div class="button-box">
               <button data-sku="hd9322/30" onclick="setLocation('http://www.shop.philips.ru/checkout/cart/add/uenc/aHR0cDovL3d3dy5zaG9wLnBoaWxpcHMucnUvYXBwbGlhbmNlcy9rb2ZlbWFzaGlueS1jaGFpbmlraS90ZWFwb3QuaHRtbA,,/product/7137/form_key/Bl6iIZbhXRdMFNN2/'); return false;" class="cart-btn-sm addcart-sm" title="Добавить в корзину - Чайник Philips HD9322/30" type="button" data-category_id="61" data-product_id="7137">Добавить в корзину - Чайник Philips HD9322/30</button>
            </div>
         </div>
         <div class="compare-url hidden-content" style="display: none;">
            <a id="link-compare-7137" class="link-compare off" href="http://www.shop.philips.ru/catalog/product_compare/add/product/7137/uenc/aHR0cDovL3d3dy5zaG9wLnBoaWxpcHMucnUvYXBwbGlhbmNlcy9rb2ZlbWFzaGlueS1jaGFpbmlraS90ZWFwb3QuaHRtbA,,/">
            Добавить в сравнение
            </a>
         </div>
      </div>
   </div>
</li>

Answer 1

在你的css文件中：

li.item:hover{
     box-shadow: 10px 10px 5px #888888; /*adjust the shadow size and color*/
}

如何在鼠标上调整容器大小？

1 个答案: