如何用CSS实现鼠标悬停时区块背景透明并显示文本与箭头图标

嘿，我来帮你搞定这个纯CSS的悬停效果！你现在的代码已经有了文本显示的雏形，但还需要调整几个关键地方，不用PS就能实现你要的效果，咱们一步步来：

核心思路 #

• 用伪元素承载背景图，避免hover时文本跟着变透明
• 统一通过容器的hover状态控制文本显示，而不是单独给文本加hover
• 用CSS绘制箭头图标，无需额外图片

修改后的完整代码 #

CSS代码 #

/* 先确保全局变量已定义，若已有可忽略 */
:root {
  --product-padding: 20px;
}

.futured { 
  padding: var(--product-padding); 
  display: grid; 
  grid-template-columns: repeat(4, 270px); 
  grid-template-rows: 1fr; 
  grid-gap: 30px; 
}

.lamp{ 
  position: relative; /* 为伪元素和内部元素定位做准备 */
  align-content: center; 
  padding: 30% 15px;
  overflow: hidden; /* 防止箭头超出容器 */
}

/* 用伪元素承载背景图，hover时仅改变背景透明度，不影响文本 */
.lamp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://anti-naruto.ru/img/product-1.jpg);
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease; /* 添加过渡动画，效果更丝滑 */
  z-index: 0; /* 把背景放在文本下方 */
}

/* 悬停时背景变半透明 */
.lamp:hover::before {
  opacity: 0.7;
}

.lamp a {
  position: relative;
  z-index: 1; /* 确保文本和箭头在背景上方 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.lamp p {
  transition: opacity 0.3s ease;
}

.lamp p:first-child{ 
  font-family: Montserrat; 
  color: #212121; 
  font-size: 1.369em; 
  font-weight: 700; 
  line-height: 1.369; 
  text-align: center; 
  opacity: 0; 
  margin-bottom: 10px;
}

.lamp p:last-child{ 
  font-family: Montserrat; 
  color: #6c6c6c; 
  font-size: 0.871em; 
  font-weight: 300; 
  line-height: 1.578; 
  text-align: center; 
  opacity: 0; 
  margin-bottom: 20px;
}

/* 悬停时显示所有文本 */
.lamp:hover p {
  opacity: 1;
}

/* 用CSS绘制箭头图标 */
.lamp a::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #212121;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lamp:hover a::after {
  opacity: 1;
}

HTML代码（修正了最后一个a标签的语法错误） #

<div class="futured">
 <div class="lamp">
  <a href="#">
   <p>Fishnet Chair</p>
   <p>Seat and back with upholstery made of cold cure foam</p>
  </a>
 </div>
 <a href="#"><img src="http://anti-naruto.ru/img/product-2.jpg" alt=""></a>
 <a href="#"><img src="http://anti-naruto.ru/img/product-3.jpg" alt=""></a>
 <a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></a>
</div>

关键调整说明 #

• 背景半透明处理：用::before伪元素单独承载背景图，hover时只修改伪元素的opacity，避免文本跟着变透明，同时添加过渡动画让效果更自然。
• 文本显示逻辑：把文本的opacity控制从p:hover改成.lamp:hover p，这样鼠标移到整个区块上就会显示文本，符合正常的交互预期。
• 箭头图标：用CSS边框绘制箭头，通过a::after伪元素实现，同样在hover时显示，无需额外引入图标库或图片。
• 层级控制：通过position: relative和z-index确保文本和箭头始终在背景图上方。

内容的提问来源于stack exchange，提问作者Maxim Yazykov