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），因此，根据您正在做的事情，您可能需要考虑更具体的选择器。

只是一个友好的提示，但是一个充分发挥作用的小提琴演示这个问题会让它更容易提供帮助。

它不会悬停或让我点击我的图库中的图像

1 个答案: