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