jqueryを使ってポップアップを作ろうとしています。
jqueryを使ってポップアップを作ろうとしています。
アイコンにマウスオーバーでポップアップ表示、ポップアップの×をクリックしてポップアップ削除という動きまではできています。
しかしマウスオーバーのアイコンはul liの中にあるのに、ポップアップはulの外に置かれているため、thisが使えず、アイコンにマウスオーバーすると全てのポップアップが表示されてしまいます。
これをマスウオーバーしたアイコンのポップアップのみ表示できるようにしたいです。
下記にソースになります。表示させたいのはアイコン02にカーソルを合わせた場合のみになります。
よろしくお願いいたします。
JS
----------------------------------------------------------------
$(function(){
$(".popup").hide();
$(".box ul li.icon02").mouseover(function(){
$(".popup").fadeIn("fast").css({
top:10+"px",
left:-95+"px"});
});
$(".popup img.closed").click(function(){
$(".popup").fadeOut("fast");
});
});
html
----------------------------------------------------------------
<div class="box">
<div class="boxIn">
<ul>
<li class="ico01"><a href="#"><img src="アイコン1url" /></a></li>
<li class="ico02"><a href="#"><img src="アイコン2url" /></a></li>
<li class="ico03"><a href="#"><img src="アイコン3url" /></a></li>
</ul>
<!--▼pop-up部分-->
<div class="popup">
<p>●●<img src="クローズボタンurl" alt="close" width="12" height="12" class="closed" /> </p>
<div class="popInner">
<p>ポップアップの中身</p>
<!--#popInner-->
</div>
<!--#popup-->
</div>
<!--▲pop-up部分ここまで-->
<!--#boxIn-->
</div>
<!--#box-->
</div>
以下
<div class="box">
~~同じ構成要素の繰り返し。
お礼
ご回答ありがとうございました。 そうですよね。しばらくコマンドボタン等にマウスを合わせる「だけ」って 大切ですね。 どう表現すればいいかわかりませんので、ストレートに書きますが、 PC操作の理解度は比較的高いほうなので一応一通りの 確認作業はしております。・・・それでも見えない比率が高いので ご協力をお願いしております。