这个鼠标悬停效果可以用纯CSS实现，主要会用到.content与.attr()就可以实现，下面青岛星网给出范例代码。

HTML代码部分

<span data-showtip="本站url是www.qdxw.net">青岛星网</span>

CSS实现代码

span{
  position: relative;
  display: inline-block;
  margin:100px;
}
span:hover{
  cursor: pointer;
}
span:hover:before{
  content: attr(data-showtip);
  background-color: #e1e1ea;
  color: #444;
  padding: .8em 1em;
  position: absolute;
  left: 100%;
  top: -70%;
  margin-left: 8px;
  white-space: pre; 
}
span:hover:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-right: 8px solid #e1e1ea;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}