css悬停信息显示

Question

好吧，它应该是非常简单但由于某种原因它不起作用。当我将鼠标悬停在图像上时，如果您将鼠标悬停在问号上并且问题已得到解答，则会弹出一个包含信息的框。

.infodot {
  position: relative;
}
.redinfo {
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  width: 280px;
  display:none;
}
.infodot:hover .redinfo {
  display: block;
}

<img src="http://www.brokenarrowwear.com/embroidery/img/infodot.png" class="infodot" />
<p class="redinfo"><strong>PLEASE NOTE</strong> - Info dot information</p>

Answer 1

您需要＆＃39;下一个兄弟＆＃39;，actually: adjacent sibling selector：

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

.infodot:hover + .redinfo {
  display: block;
}

演示：http://jsfiddle.net/d1taznfb/

另一种选择是更改标记，以便您可以使用不同的选择器。