当某个图像悬停时，会显示某些信息

Question

我有以下css和HTML：

{{1}}

我想在悬停glenn的图像（.one）时，然后所有带有glenn类的东西都会出现，并且当将dave的图片（.two）悬停在所有的东西上时。戴夫应该出现。如何使用此配置执行此操作？

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>