我的项目文件可以在这里下载:https ://rapidshare.com/files/1601614875/projectFiles.zip [如果需要:“只有2mb]
我有一个网页和网页内的弹出窗口。在弹出窗口中有两个图像和一个 div 内的标题,我希望 div 在悬停时隐藏并显示另一个 div,其中相同的图像更大和一个段落。对于主网页中的相同内容,我具有完全相同的功能,并且它运行良好,但在弹出窗口中它根本不起作用。
我的 HTML 代码:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<a href="" class="actor_thumb"><img src="images/actor-01.jpg" width="65" height="50" /></a>
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<a href="" class="big-thumb"><img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" /></a>
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<a href="" class="actor_thumb"><img src="images/actor-02.jpg" width="65" height="50" /></a>
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<a href="" class="big-thumb"><img src="images/030Rachel_O_meara-ID15405.jpg" width="150" /></a>
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript代码:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
我的尝试不起作用:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">