0

作成しようとしているボタンがあります。誰かがその上にカーソルを置いたときに、次のアクションが発生するようにしたい -->

ホバリング中 1) 色が別の色にフェードアウトする 2) 別の色が最初の色にフェードバックする

トリックは、ユーザーがボタンからマウスを離したときではなく、ホバー状態の間にフェードバックが発生するようにすることです。

2 番目のトリックは、形状を実現するために、かなりの数の境界操作があり、それに応じてそれらも変更したいということです。

ここにボタンの jsfiddle があります --> http://jsfiddle.net/88B3e/1/

HTML -->

<a href="#" class="more">
  <span class="triangle1"></span>
  <span class="thoughts">thoughts?</span><span class="triangle"></span>
</a>

CSS -->

.triangle1 {
  float: left;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 12px solid #de8063;
  border-bottom: 12px solid #de8063;
  border-right: none;
  border-left: 12px solid #f5f3f0;
}
.thoughts {
  float: left;
  background-color: #de8063;
  padding: 3px 2px 2px 4px;
  color: #f0dfd8;
  font-family: 'PT Sans';
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}
.triangle {
  float: left;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 12px solid #f5f3f0;
  border-left: 12px solid #de8063;
  border-bottom: 12px solid #f5f3f0;
}

あなたの賢明なアドバイスが切実に必要です:)。

乾杯、ステパン

4

2 に答える 2

1

これを試してください、私はjqueryとcss3でこれを行います

$(document).ready(function(){
    $('.more').hover(function(){
        $(this).addClass('moreHover');  
        setTimeout(function(){
        $('a.more').removeClass('moreHover');}, 3000);
    });

});

作業ファイル

于 2013-05-27T10:12:59.657 に答える
0

使用する

.thoughts:hover{
    color:#bc9c00;
    transition:.85s;
}

そしてそれは適切に機能します。

ホバリング中にカラー チャンスを元に戻したい場合は、マウスオーバー イベントを取得する必要があります。私はこれにあまり慣れていないので、あなたを助けることはできません!

于 2013-05-27T10:07:06.420 に答える