html - 如何在悬停时为div显示相应的标签

Question

嗨，我有一个圆形 div，我希望一些文本在悬停时显示并在鼠标移出时仅使用 css 消失，例如，如果有一个圆形 div，我希望标签说 home 在悬停时出现在其右侧并在鼠标上消失出去

我的按钮代码是-

 .cbp-fbscroller > nav a {
    display: block;
    position: relative;
    z-index: 9999;
    color: transparent;
    width: 26px;
    height: 26px;
    outline: none;
    margin: 25px 0;
    border-radius: 50%;
    border: 4px solid #fff;
}

.no-touch .cbp-fbscroller > nav a:hover {
    background: rgba(255,255,255,0.4);
}

.cbp-fbscroller > nav a.cbp-fbcurrent {
    background: #fff;
}

Answer 1

你可以使用这个代码.....

.circle {
 width: 150px;
 height: 150px;
 border: 5px solid whitesmoke;
 border-radius: 50%;
 position: relative;
 background:url('http://download.jqueryui.com/themeroller/images/ui-  bg_flat_100_555_40x100.png');
 }
.circle:before {
 position: absolute;
 top: 10px;
 left: 10px;
 right: 10px;
 bottom: 10px;
 background: whitesmoke;
 border-radius: 50%;
 content:"";
 display: block;
  }
 .circle:hover span {
 display:inline;
 width: 0;
 height: 0;
 position: absolute;
 top: 50%;
 left:100%;
 margin: -5px 0px -5px -25%;
 padding: 5px 0px 5px 25%;
}
span
{
display:none;
}

演示：JSFIDDLE