如何在悬停时为div显示相应的标签答案

【问题标题】：How to display corresponding tag on hover for a div如何在悬停时为div显示相应的标签
【发布时间】：2013-10-03 06:01:11
【问题描述】：

嗨，我有一个圆形 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;
}

【问题讨论】：

您可以使用 :before 和 :after 在 CSS 中实现类似的功能..
请同时显示您的 HTML。

标签： html css text hover toggle

【解决方案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

【讨论】：