JQueryを使ってcssを書き換え

質問

何となくコードを見てさわる程度の初心者です。
以下のようなソースを組みました。

<div id="slide">
<a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a>
</div>

<div id="slidenavi">
<ul>
<li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li>
<li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li>
<li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li>
</ul>
</div>

#slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。
ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。
問題はここからです。
最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。
そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。
この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。
jsファイルは以下の通りです。

$(function(){
$('#slidenavi ul li a').fadeTo(0,0.4);
$('#slidenavi ul li a').hover(function(){
$(this).fadeTo(300,1.0);
},
function(){
$(this).fadeTo(300,0.4);
})
$('#slidenavi ul li img').mouseover(function(){
var bglink = $(this).attr("class");
var altTxt = $(this).attr("alt");
$("#slide img").attr("src","images/home/main/"+bglink);
$("#slide img").attr("alt",altTxt);
$("#slide span.active").css("display","block");
});
$('#slidenavi ul li a').mouseover(function(){
var Href = $(this).attr('href');
var Tget = $(this).attr('target');
$("#slide a").attr("href", Href);
$("#slide a").attr("target", Tget);
$("#slide a").click(function() {
window.open(Href,'_self');
return false;
});
});
});

回答No.1

atse · ベストアンサー

> $("#slide span.active").css("display","block");

spanは#slideではなく#slidenaviのほうに入ってますよ。

マウスオーバーした画像と同じliに同梱しているspanのみのcssを変更したいなら、

$('#slidenavi ul li a').mouseover(function(){

こっちの中に、

$(this).parent().children("span.active").css("display","block");

とかかな。
spanが空だから実際どうcssで装飾されているかわからないけど。

お礼

回答、ありがとうございました。
最初に教えて頂いた通り、

$('#slidenavi ul li a').mouseover(function(){
内に
$(this).parent().children("span.active").css("display","block");
を単純に付け加えたのですが、そうしたら<span>が全部<display: block>になってしまって、全部表示されたので２度目の質問をさせて頂きました。
結果的にマウスアウトの処理も加えて、以下のようにコードを整理したらうまくいきました。

$(function(){
$('#slidenavi ul li a').fadeTo(0,0.4);
$('#slidenavi ul li a').hover(function(){
$(this).fadeTo(300,1.0);
},
function(){
$(this).fadeTo(300,0.4);
})
$('#slidenavi ul li img').mouseover(function(){
var bglink = $(this).attr("class");
var altTxt = $(this).attr("alt");
$("#slide img").attr("src","images/home/main/"+bglink);
$("#slide img").attr("alt",altTxt);
$('#slidenavi ul li a').mouseover(function(){
var Href = $(this).attr('href');
$("#slide a").attr("href", Href);
$(this).parent().children("span.active").css("display","block");
});
});
$('#slidenavi ul li a').mouseout(function(){
$(this).parent().children("span.active").css("display","none");
});
$("#slide a").click(function() {
window.open(Href,'_self');
return false;
});
});

ちなみに<span>タグの位置を<li>内の最後に書くと、IE6でマウスオーバー時だけ余計な隙間が出来るので、最初に移動しました。
たぶんまだ整理が出来るのかもしれないけど、自分なりにいろいろ試したらうまく動かなくなったので、これで解決とさせて頂きます。

ありがとうございました。

補足

回答、ありがとうございます。

> spanは#slideではなく#slidenaviのほうに入ってますよ。

本当ですね(笑)。私のうっかりミスでした。

cssはこのように書いています（一部抜粋）。

#slidenavi ul li {
list-style: none;
position: relative;
}
#slidenavi ul li a {
display:block;
width: 218px;
height: 42px;
text-decoraion: none;
border: #DDD 1px solid;
}
#slidenavi ul li a:hover {
border: #F60 1px solid;
}
#slidenavi ul li a img {
border: none;
width: 218px;
height: 42px;
}
#slidenavi ul li span.active {
display: none;
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
width: 20px;
height: 8px;
background: url(active.gif) no-repeat left top;
}

やりたいことは、ナビゲーションボタンの上にマウスが乗った時に、「今はこのバナーがメインに表示されてますよ」ということが分かるように、アイコン（active.gif）を絶対配置でナビゲーション画像の上に重ねて表示させたいのです。
ご教授の通り書き換えると、先の記事の問題は解決されてうまく動作はするのですが、またしても困ったことが・・・。
よく考えれば当たり前のことなのですが、５つのナビに入っている<span>が全部<display: block>になってしまって、全部表示されます。
マウスが乗ったナビボタンの<span>だけを block にするうまい方法ってないですか？　
そしてマウスが離れると再び display:none にする処理も必要ってことですよね？

回答No.2

fujillin

こんにちは。

＞マウスが乗ったナビボタンの<span>だけを block にするうまい方法っ
＞てないですか？
No1様の回答をよく読めば、そこまで見越して回答なさっていることがわかるはず。

＞そしてマウスが離れると再び display:none にする処理も必要ってこと
＞ですよね？
表示するのと、同様の処理方法で非表示にすれば可能です。

ただし、#slideの設定内容はそのまま残すのでしょうから、質問者様の主旨から言えば、その設定がある間はその<span>は表示状態を維持していたほうが良いのではないでしょうか？
それなので、マウスアウトで消すと言うよりも、マウスオーバーのときに自分以外の<sapn>は非表示にして、自分の<span>だけを表示状態にするという処理にするほうが良いのではないかと想像します。

お礼

回答ありがとうございました。
結論から言うと無事に解決致しました。

最初、No.1様の回答通りに組み込んでみたのですが、３つの<span>が全部display:block になってしまって表示されたので、改めて質問をさせて頂きました。決して回答をよく読んでいないわけではありませんので、ご了解下さい。
マウスアウトで<span>は消えてしまっても問題ありませんし、望んだ通りの挙動です。

ありがとうございました。