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

悬停时
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;
}


急需您的明智建议:)。

干杯,
斯蒂芬

最佳答案

试试这个,我用jQuery和CSS3做

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

});


working File

10-06 04:30
查看更多