#html #css
Вопрос:
Для моего сайта я хочу показать некоторые продукты на своем сайте, и когда вы наведете курсор на эти продукты, там должно быть больше информации. В настоящее время дизайн карточки продукта находится там. У меня есть 2 вопроса, которые я не могу решить.
- Я не могу поместить теневой прямоугольник вокруг всего div, когда я навожу на него курсор. Я попытался добавить высоту в свой div, но это испортило расположение других моих дивов. Что я делаю не так?
- Также граница моего div проходит через мою кнопку (по крайней мере, ссылку, которую я оформил как кнопку). Как я могу это исправить?
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
} <div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
<a href="www.mysite.com" class="product-overlay-button">Vergelijk prijzen</a>
</div>
</div>
</div> Ответ №1:
Многие ваши проблемы возникают из .product-info -за наличия position: absolute; . Так что удалите это (оба из них у вас есть position: absolute; там дважды); затем вы можете добавить некоторые padding-bottom .product-grid , чтобы «вписать» вашу кнопку внутрь div .
Посмотрите, что я здесь сделал:
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
padding-bottom: 15px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
width: 225px;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
} <div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product</p>
<a href="www.mysite.com" class="product-overlay-button">Vergelijk prijzen</a>
</div>
</div>
</div> Комментарии:
1. Привет, Джон, твое предложение работает для тени, так что спасибо за это. Единственная проблема заключается в том, что, когда вы помещаете текст или что-то под ним, макет меняется. Как я могу это исправить?
2. Можете ли вы объяснить подробнее? например, поместите текст под чем и где? и как это меняется? Если вы можете предоставить код, в котором возникает проблема, это было бы полезно.
3. Конечно, это имеет смысл, поэтому я пытаюсь установить несколько этих продуктов на домашней странице. Затем под продуктами я хочу иметь другой продукт или какой-то текст, но макет меняется. В этой ручке есть пример: codepen.io/PHV/pen/vYxxQQY?editors=1100
4.конечно, это можно решить, если я сделаю
.product-gridposition: absolute;background-color: white;это иz-index: 1;посмотрите здесь: jsfiddle.net/whLo70ef/25. Чертов герой! Спасибо, это именно то, что я искал. Хорошего дня!
Ответ №2:
Вы можете использовать настройки тени, аналогичные 0px 0px 10px 4px (т. е. первое и второе значения равны нулю, поэтому тень будет равномерно распределена по всем сторонам в соответствии с третьим и четвертым значениями).:
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
} <div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
<a href="www.mysite.com" class="product-overlay-button">Vergelijk prijzen</a>
</div>
</div>
</div>