html - 使一个类(class)出现在另一个类(class)悬停

Question

大家好，我正在尝试制作一个全宽图像条，当悬停一个图像时，我希望有关该图像的文本显示在条下方。到目前为止，我有以下 html 和 css:

<div class="everything-container">
  <div class="pic-container">
    <img class="pic one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
  </div>
  <div class="info-container">
    <div class="name">
      <p class="glenn name">Glenn</p>
    </div>
    <div class="title">
      <p class="glenn title">Part Owner/ Senior Inspector</p>
    </div>
    <div class="bio">
      <p class="glenn bio">My name is Glenn and I am amazing.</p>
    </div>
  </div>
</div>

.everything-container {
  height: 500px;
  width: 100%;
  border: 2px solid black;
}
.pic-container {
  width: 100%;
  height: 100px;
  border: 2px solid green;
}
.info-container {
  width: 100%;
  height: 400px;
  border: 2px solid red;
}
.name {
  height: 400px;
  width: 25%;
  border: 2px solid yellow;
  float: left;
  text-align: center;
  font-size: 120%;
  font-family: "Open Sans";
  font-weight: bold;
  color: black;
}
.title {
  height: 400px;
  width: 20%;
  border: 2px solid blue;
  float: left;
  text-align: center;
  font-size: 90%;
  text-decoration: italic;
  color: grey;
  font-family: "Open Sans";
}
.bio {
  height: 400px;
  width: 55%;
  border: 2px solid orange;
  float: left;
  font-size: 100%;
  text-align: center;
  color: black;
  font-family: "Open Sans";
}
.pic {
  height: 100px;
  width: 100px;
  float: left;
}

我给其中一张图片赋予了“一”类，当我将其悬停时，我希望出现任何带有“glenn”类的东西。使用 .one:hover .glenn { stuff } 无效。这可能吗？谢谢!

Answer 1

恐怕这是没有 javascript 你能得到的最接近的:

<div class="everything one">
  <div class="image">
   <img src="..." />
  </div>
  <div class="info">
    Name
    Title
    Details
  </div>
</div>

CSS:

.everything .info {
 opacity: 0;
}

.everything:hover .info {
 opacity: 1;
}