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;
}

我给了我的一张照片＆＃34;一个＆＃34;当我徘徊它时，我想要任何类似于＆＃34; glenn＆＃34;出现。使用.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;
}

Answer 2

为了制作＆＃34; .one：hover .glenn＆＃34;工作你需要一切与课堂＆＃39; glenn＆＃39;在一个＆＃39;一个＆＃39;。

的元素里面

如果你无法实现这一点，你可能需要使用javascript。

Answer 3

.info-container {
    display: none;
}   

.pic-container:hover + .info-container {
    display: block;
}

这是最简单的方法：

因为您不需要JavaScript
因为它适用于您的HTML，无需配置。

让一个班级出现在另一个班级上

3 个答案: