元のjquery:
$('#container section').each(function() {
$(this).waypoint(function(direction) {
var anchorRef = 'a[href="#' + this.id + '"]';
if (direction === 'down') {
$(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
} else {
$(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
}
});
});
CSS:
.main-menu ul li a:hover {
background-color: #333;
}
問題は、アニメーションが終了してその要素に戻ると、ホバー効果が適用されなくなることです。
理由はありますか？
次のように、スクリプトで誇張を「強制」しようとしました。
$('#container section').each(function() {
$(this).waypoint(function(direction) {
var anchorRef = 'a[href="#' + this.id + '"]';
var anchorRefHover = 'a[href="#' + this.id + '"]:hover';//NEW
if (direction === 'down') {
$(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
$(anchorRefHover).css({backgroundColor : '#333'});//NEW
} else {
$(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
$(anchorRefHover).css({backgroundColor : '#333'});//NEW
}
});
});
CSS のホバー効果市場はまだ失われています。
CSS ホバー ルールに !important を追加しました。これにより、ホバーがトリガーされます。しかし、私が javascript を使用してそれを行うことを好む理由は 、ホバーしている要素に背景 rgb(230, 77, 78) がない場合にのみ、ホバーの背景色を適用する必要があるためです。
うまくいくかどうかはわかりませんが、上記の場合はjavascript経由で !important を追加しようと考えています...しかし、おそらくもっと良い方法がありますか?
私を助ける手がかりはありますか？
注: koala_dev efford のおかげで、Fiddle は次のようになります。