主页 / 问题 / 1053181
Accepted
Даша Новикова
Asked:2020-12-02 15:09:28 +0000 UTC2020-12-02 15:09:28 +0000 UTC

悬停时更改产品卡片

  • 772

当我将鼠标悬停在图像上时，我想要一些东西，一个半透明的渐变和 2 个按钮出现在它上面。我发生了一些事情，但我仍然不完全理解它是如何工作的。为什么只有在设置为半透明渐变时z-index: -1;才会起作用。所有块的 z-index 的所有其他选项都不起作用。以及如何制作一种外观光滑而不是尖锐的东西，对我来说也没有transition解决animation（（

.new-product__item-image {
  background-color: red;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.new-product__item-btn {
  display: none;
}

.btn-product {
padding: 10px 20px;  
}

.new-product__item-image:hover::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  background-color: blue;
  z-index: -1
 
}
.new-product__item-image:hover .new-product__item-btn{
  display: block;
}

.new-product__item-image:hover .btn-product{
  background-color: pink;
  z-index: 100
}
<div class="new-product__item-image">
		<div class="new-product__item-btn">
			<button class="btn-product btn-info">More Info</button>
			<button class="btn-product btn-demo">Live Demo</button>
		</div>
</div>

javascript

2 个回答

  1. 使用不透明度 1；0-1 示例 0.25,0.5,0.75

    • 1
  2. Best Answer

    .mama {
  position: relative;
  background-color: #22282b;
  color: #ddd;
  width: 300px;
  height: 200px;
} /* Не хотелось сильно засорять код позиционированием */

.bubu { /* Вместо ::after, сам блок можно растянуть на весь размер родителя. */
  opacity: 0;  /* << */
  transition: opacity 1s;
    
  position: absolute; 
  top: 0; left: 0;
  background-image: linear-gradient( #045acf88, #1238 ); 
  /* Четвертая "группа" чисел задает прозрачность. ff - стандартный, 00 - невидимый, 
     а 88 и 8 как-раз где-то посередине прозрачности */
  padding: 50px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;  
}

.mama:hover .bubu {
  opacity: 1;  /* << */
}
    <div class="mama">
  Какой-то текст...
  <div class="bubu">
    <button class="btn">More Info</button>
    <button class="btn">Live Demo</button>
  </div>
</div>

    • 1

相关问题