0

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

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

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

干杯，斯蒂芬

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 回答