1

「空いてます！」という言葉を手に入れようとしています。小さな「+」画像の上にマウスを置くと、左からスライドアウトします。私が Google で見つけたものは役に立ちません。

前 -ここに画像の説明を入力

ホバーでやりたいことここに画像の説明を入力

また、ホバーしたときにその小さな「+」記号を横向きにしたいのですが、自分でそれを行う方法について考えがあると思います. しかし、助けを気にしません:)

これらすべてを 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 に答える