它不会悬停或让我单击画廊中的图像

Question

由于我已将这种裁剪效果 (http://jsfiddle.net/BPEhD/2/) 添加到画廊中的图像中，因此图像上没有悬停状态，也不会让点击它们.当我将鼠标悬停在它们上时会出现指针光标，但是当我单击它时它不会调出面板。我该如何解决这个问题？

HTML：

<div id="thumbsWrapper">
<div id="content">

<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<p class="crop">        
<img src="image2.jpg" alt="image2.jpg"/></p>
<p class="crop"> 
<img src="image1.jpg" alt="image1.jpg"/></p>

<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>

CSS：

#thumbsWrapper{
position:relative;
height:100%;
width:100%;
left:0px;
right:0px;
}
#content{
position:relative;
height:100%;
width:100%;
left:0px;
display:none;
} 
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:200px;
height:200px;
}
.crop img{
position:absolute;
top:-50px;
left:-50px;
}
#content img{
float:left;
margin:5px 0px 5px 5px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
#panel{
background-color:#ddd;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
z-index:999;
}
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}

相关JS：

$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed   = 500;

/* show the content */
$('#content').show();

/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
 */
$(window).bind('resize', function() {
    var $picture = $('#wrapper').find('img');
    resize($picture);
});

/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
 */
$('#content > img').hover(function () {
    var $this   = $(this);
    $this.stop().animate({'opacity':'1.0'},200);
},function () {
    var $this   = $(this);
    $this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
    var $this   = $(this);

    /* shows the loading icon */
    $('#loading').show();

    $('<img alt="">').load(function(){
        $('#loading').hide();
        if($('#wrapper').find('img').length) return;
        current     = $this.index();
        var $theImage   = $(this);
        /*
        After it's loaded we hide the loading icon
        and resize the image, given the window size;
        then we append the image to the wrapper
        */
        resize($theImage);

        $('#wrapper').append($theImage);
        /* make its opacity animate */
        $theImage.fadeIn(800);

        /* and finally slide up the panel */
        $('#panel').animate({'height':'100%'},speed,function(){
            /*

Answer 1

我认为问题在于您用于匹配图像标签的选择器。您正在使用子选择器，它只选择所选元素的直接子元素（请参阅documentation）。由于（我猜）您在图像周围添加了p 标签以应用裁剪效果，因此选择器不再返回图像。

尝试如下更新您的代码：

$('#content img').hover(function () {
    var $this   = $(this);
    $this.stop().animate({'opacity':'1.0'},200);
}

请注意，这将选择内容div 的所有后代元素（请参阅documentation），因此，根据您的操作，您可能需要考虑更具体的选择器。

只是一个友好的提示，但一个功能齐全的小提琴演示这个问题会更容易帮助。