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

你需要 'next sibling', 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/

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

css悬停信息显示

css hover info display

css

popup

hover