jquery - 悬停时，更改颜色并返回

Question

我有一个我正在尝试创建的按钮，当有人将鼠标悬停在该按钮上时，我希望发生以下操作 -->

悬停时1)颜色逐渐变成不同的颜色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;
}

非常需要您的明智建议 :)。

干杯，斯捷潘

Answer 1

试试这个，我用 jquery 和 css3 做这个

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

});

working File