從懸停的圖像上使用CSS滑出文本

Question

我試圖說出「我可用！」當我將鼠標懸停在它上面時，從左側滑出小「+」圖像。我在Google上找到的僅僅是沒有幫助。

前 -

我希望它懸停做什麼

我也想提出，當鼠標懸停以及那個小「+」號側身翻，但我想我有一個關於如何自己做的想法。雖然不介意幫助:)

如果我可以用CSS/HTML做所有這些事情，那就太好了。我知道一些jQuery，但我試圖避免它，因爲CSS只是更乾淨。

Answer 1

如果你想讓它不使用jQuery只需旋轉使用css3動畫屬性：

這將使徘徊

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(360deg); 
    } 
    to { 
    -webkit-transform: rotate(0deg); 
    } 
} 

@-moz-keyframes rotate { 
    from 
    { 
     -moz-transform: rotate(360deg); 
    } 
    to { 
    -moz-transform: rotate(0deg); 
    } 
} 

.plusicon:hover 
{ 
    -webkit-animation-name:    rotate; 
    -webkit-animation-duration:   0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

    -moz-animation-name:    rotate; 
    -moz-animation-duration:   0.5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
} 

你也應該能夠使用-webkit-transition-duration: 1s;移動你的文字了

Answer 2

所以你想要某種形式的提示。

的HTML：

<a href="#"> 
    <span>I'm available!</span> 
</a> 

的CSS：

a { 
    background: url(../path_to_image.png) 0 0 no-repeat; /*you allready have that part */ 
    position: relative; 
} 
a span { 
    display: none; 
    position: absolute; 
    left: -10px; 
    top: 3px; 
} 
a:hover span { 
    display: block; 
} 

可以更換任何你有<a>標籤絲毫沒有

Answer 3

HTML：

<div class="slidebtn"> 
    <div class="icon"> 
     <div class="text"><p>I'm Aviable</p></div> 
    </div> 

</div>​ 

CSS：

.slidebtn{ 
    width:140px; 
    margin:auto; 
    overflow:hidden; 
    height:auto; 
    position:relative; 
} 
.text{ 
    position:absolute; 
    width:100px; 
    float:Left; 
    margin-left:150px; 
} 
.icon{ 
    background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png'); 
    width:24px; 
    height:24px; 
    float:right; 
    background-repeat: no-repeat; 
    background-position: right; 

} 
.icon:hover{ 
    width:130px; 
} 
.icon:hover .text{ 
    margin-left:0px; 
} 
    ​ 

DEMO

​ 

，如果你想使用CSS3過渡轉變作風像這些

.text{ 
    position:absolute; 
    width:100px; 
    float:Left; 
    margin-left:150px; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    z-index:-1; 
} 
.icon{ 
    background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png'); 
    width:24px; 
    height:24px; 
    float:right; 
    background-repeat: no-repeat; 
    background-position: right; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

} 

DEMO 2