悬停特定图像时显示特定信息答案

【问题标题】：make certain info appear when a certain image is hovered悬停特定图像时显示特定信息
【发布时间】：2016-11-25 14:06:13
【问题描述】：

我有以下 css 和 HTML：

<div class="container">
<img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
<img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg">
<p class="name glenn">Glenn</p>
<p class="title glenn">Part Owner/Senior Inspector</p>
<p class="bio glenn">I am Glenn hear me roar!</p></img>
<p class="name dave">Dave</p>
<p class="title dave">Part Owner/ Manager</p>
<p class="bio dave">I am Dave hear me roar!</p>
</div>

.container {
  height: 500px;
  width: 100%;
  border: 2px solid black;
}

.imag {
  height: 100px;
  width: 100px;
  float: left;
}

.name {
  position: absolute;
  top: 50vh;
}

.title {
  position: absolute;
  top: 50vh;
  left: 25vw;
}

.bio {
  position: absolute;
  top: 50vh;
  left: 50vw;
}

.glenn {
  opacity: 0;
}

.dave {
  opacity: 0;
}

.one:hover .glenn {
  opacity: 1 !important; 
}

.one:hover {
  opacity: 0.5;
}

我希望当悬停 glenn 的图像 (.one) 时，所有具有 glenn 类的东西都应该出现，而当悬停 dave 的图片 (.two) 时，所有带有 .dave 的东西都应该出现。我怎样才能用这个配置做到这一点？

【问题讨论】：

标签： html css class web hover

【解决方案1】：

您正在寻找~General sibling combinator 选择器

<div class="container"> <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> <p class="name glenn">Glenn</p> <p class="title glenn">Part Owner/Senior Inspector</p> <p class="bio glenn">I am Glenn hear me roar!</p></img> <p class="name dave">Dave</p> <p class="title dave">Part Owner/ Manager</p> <p class="bio dave">I am Dave hear me roar!</p> </div> .container {
  height: 500px;
  width: 100%;
  border: 2px solid black;
}
.imag {
  height: 100px;
  width: 100px;
  float: left;
}
.name {
  position: absolute;
  top: 50vh;
}
.title {
  position: absolute;
  top: 50vh;
  left: 25vw;
}
.bio {
  position: absolute;
  top: 50vh;
  left: 50vw;
}
.glenn {
  opacity: 0;
}
.dave {
  opacity: 0;
}
.one:hover ~ .glenn {
  opacity: 1 !important;
}
.one:hover {
  opacity: 0.5;
}
.two:hover ~ .dave {
  opacity: 1 !important;
}
.two:hover {
  opacity: 0.5;
}

<div class="container">
  <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
  <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg">
  <p class="name glenn">Glenn</p>
  <p class="title glenn">Part Owner/Senior Inspector</p>
  <p class="bio glenn">I am Glenn hear me roar!</p>
  <p class="name dave">Dave</p>
  <p class="title dave">Part Owner/ Manager</p>
  <p class="bio dave">I am Dave hear me roar!</p>
</div>

【讨论】：