1

我试图得到“我有空！”这句话。当我将鼠标悬停在小“+”图像上时，从左侧滑出。我在谷歌上找到的东西没有帮助。

前 -在此处输入图像描述

我希望它在悬停时做什么在此处输入图像描述

我也想让那个小“+”号在悬停时侧向转动，但我想我自己有一个想法。不介意帮助:)

如果我可以只用 CSS/HTML 完成所有这些事情，那就太好了。我知道一些 jQuery，但我尽量避免使用它，因为 CSS 更简洁。

4

3 回答 3

2

如果您希望它在不使用 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-transition-duration: 1s;将您的文本移出

于 2012-10-03T18:44:23.063 回答
0

所以你想要某种工具提示。

的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>你可以用你有的任何东西替换标签

于 2012-10-03T16:03:01.040 回答
0

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

演示

​

如果你想使用这样的 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;

}

演示 2

于 2012-10-03T18:04:46.763 回答