a要素でリンク貼るとロールオーバーしないのは何故？

質問

お世話になります。
Javascriptの知識はほとんどない者ですが、どうかご教授ください。

現在制作中のWebサイトでグローバルメニューのボタン類をJqueryを使ってマウスオン時にロールオーバーさせたいと考えております。非常にありふれたよくある見せ方なんですが、それでhttp://www.kyosuke.jp/yugajs/で配布されているMITライセンス（商用利用なので）のyuga.jsというファイルを使用させてもらってロールオーバーを実現させたいと思いました。手順通り実行してみたのですが、下記のようにごく普通にa要素でリンクを貼るとマウスオーバーしなくなるという現象がおきました。a要素がない場合はロールオーバーするのですが、リンクしてない状態では何の意味もないので、少々困っております。

↓マウスオーバーしない
<a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a>
↓マウスオーバーする
<img src="images/button_07.gif" alt="TOPボタン" class="btn" />

javascriptのソースを開いてみたのですが、私ではまったく知識がなくて分かりかねました。
恐らくロールーバー部分であろうソースを記載しましたので、どうかご教授ください。
よろしくお願いします。

//ロールオーバー
rollover: function(options) {
var c = $.extend({
hoverSelector: '.btn, .allbtn img',
groupSelector: '.btngroup',
postfix: '_on'
}, options);
//ロールオーバーするノードの初期化
var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent);
rolloverImgs.each(function(){
this.originalSrc = $(this).attr('src');
this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
this.rolloverImg = new Image;
this.rolloverImg.src = this.rolloverSrc;
});
//グループ内のimg要素を指定するセレクタ生成
var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg);

//通常ロールオーバー
rolloverImgs.not(groupingImgs).hover(function(){
$(this).attr('src',this.rolloverSrc);
},function(){
$(this).attr('src',this.originalSrc);
});
//グループ化されたロールオーバー
$(c.groupSelector).hover(function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.rolloverSrc);
});
},function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.originalSrc);
});
});
//フィルタ用function
function isNotCurrent(i){
return Boolean(!this.currentSrc);
}
function isRolloverImg(i){
return Boolean(this.rolloverSrc);
}

},

回答No.1

my-- · ベストアンサー

http://www.kyosuke.jp/yugajs/#selflink_current

たぶんこの項に書いてある条件に当てはまっているのだと思いますが
その画像はロールオーバーの対象から除外されます。

この処理を行っているのがyuga.jsのココ。

$(function() {
//$.yuga.selflink(); // ココ
$.yuga.rollover();
$.yuga.externalLink();
$.yuga.thickbox();
$.yuga.scroll();
$.yuga.tab();
$.yuga.stripe();
$.yuga.css3class();
});

ロールオーバーを優先させたいなら実行しない、でいいと思います。

お礼

回答ありがとうございます！
ご指摘の通り、$.yuga.selflink();を削除したら思う通りの動きができました！本当にありがとうございます！！