html - 悬停某个图像时显示某些信息

Question

我有以下 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 的东西都应该出现。我如何使用此配置执行此操作？

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