在悬停时使用CSS从图像中滑出文本

当我将鼠标悬停在小“+”图像上时，我正试图从左侧滑出“我有空”这几个字。我在谷歌上找到的东西帮不上忙

在—

悬停时我希望它做什么

我也想让那个小小的“+”符号在悬停的时候转向一边，但我想我自己也有办法做到这一点。不过我不介意帮忙：）

---

如果我能用CSS/HTML做所有这些事情，那就太好了。我知道一些jQuery，但我尽量避免使用它，因为CSS更干净。

所以您需要某种工具提示

html：

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

您可以将

标记替换为您所拥有的任何内容

HTML：

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

</div>​

如果您想使用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;

}

---

如果希望它在不使用jquery的情况下旋转，只需使用css3动画属性：

这将使您的加号图标在悬停时旋转360度

@-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转换持续时间：1s

要将文本移出

可以发布相关的HTML和CSS吗？这正是我想要的。很遗憾，我需要jQuery，但它可以工作！谢谢我改变了我的答案看看也许它能帮你哦我喜欢这个！完美的很难把它放在其他图标旁边，但我肯定我能弄明白：）让它与我的网页、定位和所有功能一起工作。再次非常感谢：首先，我要说我还没有尝试过这个方法，所以它完全可以工作，但我一直在玩转换属性，无论出于什么原因，我的圆圈在悬停时会移动位置。它会转动，但看起来好像是从顶部被钉住的。我很难解释，所以这里有一个图像，当你在上面悬停时，它做了些什么-我在寻找它，看起来好像只有“+”符号旋转，而不是圆圈。我甚至试着将圆圈作为背景图像，但+号最终做了相同的事情整个事情看起来像是旋转的原因是由于图像容器上的填充或边距。如果图像未在具有旋转的包装中居中，则图像将看起来不居中，如果图像居中，整个圆也将旋转，但它将保持在原位，因此看起来只像+符号旋转。

​

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

}

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