Здравствуйте. Помогите, пожалуйста, если можно. Я пытаюсь сделать, чтобы при наведении на товар в новинках, рекомендуемых, категориях и т.д. вокруг него появлялась рамка с тенью. Прописываю таким образом Код: <?php if($latest_products){ ?> <div id="tab-latest-<?php echo $module; ?>" class="tab-content"> <?php foreach ($latest_products as $product) { ?> <div class="product-grid"> <div class="product-desc-hover"> <div class="box-absolute"> <div> <?php if ($product['thumb']) { ?> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <?php } ?> <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div> <?php if ($product['price']) { ?> <div class="price"> <?php if (!$product['special']) { ?> <?php echo $product['price']; ?> <?php } else { ?> <span class="price-old"><?php echo $product['price']; ?></span><br /><span class="price-new"><?php echo $product['special']; ?></span> <?php } ?> </div> <?php } ?> <div class="rating"> <?php for ($i = 1; $i <= 5; $i++) { ?> <?php if ($product['rating'] < $i) { ?> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> <?php } else { ?> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <?php } ?> <?php } ?> </div> <div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button-prod" title="<?php echo $button_cart; ?>"><i class="fa fa-shopping-cart"></i> <?php echo $button_cart; ?></a></div> </div> </div> </div> </div> <?php } ?> </div> В styleshit.css вставляю Код: .product-grid{width:100%;overflow:visible} .product-grid>div{width:33%;min-height:410px;display:inline-block;vertical-align:top;margin-bottom:20px;font-size:12px;/* border-top:1px dashed #ccc */} .product-grid .product-desc-hover:hover .descprod_bg{display:none} .product-grid .product-desc-hover .descprod_bg{background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 44%, rgba(255,255,255,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(44%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 );bottom:0;height:40px;left:0;position:absolute;width:100%;z-index:2} .box-absolute{background:#fff;border:1px solid #fff;padding:10px 15px;position:absolute;width:93%} .box-absolute a img{width:100%;max-width:250px} .product-desc-hover{overflow:hidden;position:relative} .product-desc-hover:hover{overflow:visible;z-index:100} .product-desc-hover:hover .box-absolute{border:1px solid #b4c6ec;box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);-moz-box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);-webkit-box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);border-radius:5px} Рамка и тень появляются, но товары выстраиваются вертикально в ряд, по одному, а нужно, чтобы были сеткой по 3 в ряду. Подскажите, как их можно сгруппировать.
Зачем такой велосипед писали? Нельзя было сделать просто: Код: .product-grid > div:hover {box-shadow:0px 0px 3px 0px #999;} display:inline-block или float:left;
halfhope, спасибо Вам за ответ. Меня этот велосипед привлек красивым внешним видом. Поэтому хотелось бы именно с ним разобраться до конца. Попробовал Ваш вариант, прописал в styleshit.css: .product-grid > div:hover {box-shadow:2px 2px 3px 2px #000; display:inline-block; } Как-то слишком плотно рамка облегает товар, а когда сделал отступ padding:7px; она начала прыгать при наведении.
Сделал таким образом: .product-grid > div { width:230px; display:inline-block; margin:10px15px20px23px; vertical-align: top; border:1px solid rgba(180,198,236,0.23);}.product-grid > div:hover { border:1px solid #b4c6ec; box-shadow:5px5px13px0 rgba(54,69,102,0.5);-moz-box-shadow:5px5px13px0 rgba(54,69,102,0.5);-webkit-box-shadow:5px5px13px0 rgba(54,69,102,0.5);-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px; border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px; border-top-right-radius:5px;} Теперь ничего не прыгает, не дергается и товары выстраиваются, как нужно. Спасибо за помощь.
