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

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

1 个答案: