CSS 新手。不确定我是否可以在另一个 CSS 选择器中定位一个 CSS 选择器 [重复]答案

【问题标题】：New to CSS. Not sure if I can target a CSS selector within another CSS selector [duplicate]CSS 新手。不确定我是否可以在另一个 CSS 选择器中定位一个 CSS 选择器 [重复]
【发布时间】：2021-01-23 02:46:51
【问题描述】：

我将文本置于图像的中心。我正在尝试为图像添加悬停效果，在悬停时，文本会消失。

这是我的代码：

.menu-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #2376bc;
  margin: auto;
  position: relative;
  text-align: center;
  color: white;
}

.menu-photo img {
  opacity: 0.3;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.menu-photo img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.menu-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
}

<figure class="menu-photo">
  <img src="img/pepperoni-min.jpg" 
       alt="Spicy Pepperoni Pizza">
  <div class="menu-name">
    <strong>Spicy Pepperoni</strong>   
  </div>
</figure>

【问题讨论】：

你到底打算做什么？文字是否应该位于图像的垂直和水平中心？

标签： html css hover

【解决方案1】：

您可以使用adjacent sibling selector (+)

.menu-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #2376bc;
  margin: auto;
  position: relative;
  text-align: center;
  color: white;
}

.menu-photo img {
  opacity: 0.3;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.menu-photo img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.menu-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
}
.menu-photo img:hover + .menu-name, .menu-name:hover {
  opacity:0 /* or display:none or visibility:hidden */
 }

<figure class="menu-photo">
                   <img src="https://via.placeholder.com/150" alt="Spicy Pepperoni Pizza" />
                   <div class="menu-name"><strong>Spicy Pepperoni</strong></div>
               </figure>

【讨论】：