我们有一个页面,显示用户用于浏览页面的标题/按钮的动画。
我们遇到的问题是鼠标悬停时的按钮不会改变背景,但它会改变文本的颜色。
我们想要的是文本为白色,按钮本身与标题/ subNav2的颜色相匹配
jQuery。
function headerChange($stopOnColor) {
//remove all classes at start
$('#siteNav').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');
$('.subNav2 a').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');
$('.subNav h1 a').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');
$colBlue = '#195369'; //rbga(25, 83, 105, 0.8)
$colMustard = '#BEBD80'; //rbga(190, 189, 128, 0.8)
$colDirtyGreen = '#708D81'; //rbga(112, 141, 129, 0.8)
$colPurple = '#70547A'; //rbga(112, 84, 122, 0.8)
$colOrange = '#D49A4B'; //rbga(212, 154, 75, 0.8)
var colorArray = [$colBlue, $colMustard, $colDirtyGreen, $colPurple, $colOrange];
if (!$stopOnColor){
colorArray.reverse();
var interval = setInterval(function(){
if(colorArray.length == 0){
clearInterval(interval);
return;
}
var entry = colorArray.pop();
var oldstr = entry;
var str = oldstr;
str = /#(.+)/.exec(str)[1];
$('header#header-top').animate({"background-color": entry}, 1000, function(){
$('#siteNav').addClass('change' + str);
//$('.navbar #siteNav .nav li.active a').animate({"color": $stopOnColor}, 1000);
//$('.subNav2 a').addClass('change' + str);
$('.subNav2 a').animate({"color": entry}, 1000);
//$('.subNav h1 a').addClass('change' + str);
$('.subNav h1 a').animate({"color": entry}, 1000);
if (colorArray.length == 0){
setTimeout(function(){
headerChange();
}, 5000);
}
});
$('.subNav2 a').animate({"color": entry}, 1000);
$('.subNav h1 a').animate({"color": entry}, 1000, function(){
// $(this).addClass('change' + str);
//to do, fix override for color on hover.
});
}, 5000);
}
else {
var oldstr = $stopOnColor;
var str = oldstr;
str = /#(.+)/.exec(str)[1];
$('header#header-top').animate({"background-color": $stopOnColor}, 1000);
$('.navbar #siteNav .nav > .active > a').animate({"color": $stopOnColor}, 1000);
$('.subNav2 a').addClass();
$('.subNav h1 a').addClass('change' + str);
$('#siteNav').addClass('change' + str);
}
};
CSS
.subNav a {
color: #353535;
background: none;
text-shadow: none;
text-shadow: 0;
border-color: none;
border: solid;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-transform: uppercase;
padding: 5px 12px;
width: 220px;
max-width: 220px;
max-height: 76px;
display: block;
margin: 0 auto;
}
.subNav a i {
opacity: 0;
position: relative;
}
.subNav a i.fa-angle-right {
left: -15px;
}
.subNav a i.fa-angle-left {
left: 15px;
}
.subNav a:link, .subNav a:visited, .subNav a:focus {
text-decoration: none;
}
.subNav a:hover {
text-decoration: none;
background-color: #353535;
color: #FFF;
}
.subNav a.change195369 {border-color: #195369; color: #195369;}
.subNav a.change195369:hover {background-color: #195369; color: #FFF;}
.subNav a.changeBEBD80 {border-color: #BEBD80; color: #BEBD80;}
.subNav a.changeBEBD80:hover {background-color: #BEBD80; color: #FFF;}
.subNav a.change708D81 {border-color: #708D81; color: #708D81;}
.subNav a.change708D81:hover {background-color: #708D81; color: #FFF;}
.subNav a.change70547A {border-color: #70547A; color: #70547A;}
.subNav a.change70547A:hover {background-color: #70547A; color: #FFF;}
.subNav a.changeD49A4B {border-color: #D49A4B; color: #D49A4B;}
.subNav a.changeD49A4B:hover {background-color: #D49A4B; color: #FFF;}
怎么样 我们想要它