Question

我有一个我想要创建的按钮，当有人在它上面盘旋时，我希望发生以下操作 - ＆gt;

徘徊时 1）颜色逐渐消失 2）不同的颜色渐变成第一种颜色

诀窍虽然我希望在悬停状态期间发生淡入淡出，而不是当用户将鼠标从按钮上移开时。

第二个技巧是我为了达到形状，我有很多边界操作，我希望它们也能相应地改变。

这是按钮的jsfiddle - ＆gt; http://jsfiddle.net/88B3e/1/

HTML - ＆gt;

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

CSS - ＆gt;

.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

Answer 2

使用

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

它会正常工作。

如果你想在徘徊时让颜色机会回来，你需要获得一些鼠标悬停事件。我对此并不常见，所以不能帮助你！

悬停时，改变颜色并返回

2 个答案: