Привет, у меня есть круговой div, и я хочу, чтобы какой-то текст отображался при наведении и исчезал на мышь, используя только css, например, если у вас есть круговой div, я хочу, чтобы тег сказал, что дом появился на правой стороне при наведении и исчезает на мыши вне
мой код для кнопок is-
.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;
}
вы можете использовать этот код.....
.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
:before
и:after
для достижения чего-то подобного в CSS.