如何顯示相應的標記懸停爲一個div

Question

嗨，我有一個圓形的div，我想要一些文字顯示在懸停和消失在鼠標使用只有css 例如，如果有一個圓形div，我想標記說家裏出現在其右側懸停和鼠標消失了

我的代碼是 -

.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; 
} 

For Demo：JSFIDDLE