从悬停的图像上使用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