CSS 的新手。不确定我是否可以在另一个 CSS 选择器中定位 CSS 选择器

Question

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

这是我的代码：

.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>

Answer 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>

CSS 的新手。不确定我是否可以在另一个 CSS 选择器中定位 CSS 选择器

New to CSS. Not sure if I can target a CSS selector within another CSS selector

html

css

hover