javascript - 我的 jquery 结果中有一个错误

Question

我的网站是http://www.grozav.com

在投资组合部分，您可以看到包含类别名称(例如Photomanipulation)的div正在取消缩略图悬停状态的 Action ，即使它包含在同一个 anchor 标记中。

Javascript 代码:

function thumbnail(param1){
    $('#'+param1+'-thumb img').mouseover(function() {
        $('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');
    })  
    $('#'+param1+'-thumb img').mouseout(function() {
        $('#'+param1+'-thumb .color').stop().fadeTo(500,'0');
    })                  
};

thumbnail('dubstep');

缩略图DIV结构:

<div class="thumb" id="dubstep-thumb" >
    <a class="ajax" href="gallery/dubstep.html">
        <p class="work-type">PHOTOMANIPULATION</p>
        <img src="images/thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/>
        <img src="images/thumbs/dubstep-thumb.jpg" alt="" width="300" height="169" class="color"/>
    </a>
</div>

CSS，如果有用的话:

.thumb {
    float:left;
    width:300px;
    height:169px;
    position:relative; 
    margin-right:10px;
    margin-top:10px;
    overflow:hidden;
    z-index:1;
}
.thumb img {
    position:absolute;
    width:300px;    
    height:169px;
}
.thumb .color {
    display:none;    
}
.work-type { 
    background:url('../images/transparent.png') repeat; 
    position:absolute; 
    z-index:1;
    width:288px; 
    height:20px; 
    margin-top:141px;
    margin-left:1px;
}
.work-type {
    font-family:arial; 
    color:#a0a0a0; 
    font-size:10px; 
    text-align:right; 
    padding-top:7px; 
    padding-right:10px;
}

提前感谢您的帮助!

Answer 1

尝试将每个事件中的选择器更改为:

$('#' + param1 + '-thumb')...

此外，您可以使用 hover() 方法将 mouseover 和 mouseout 事件处理程序合并为一个，如下所示:

$('#'+param1+'-thumb').hover(
    function() {
        $('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');
    },
    function() {
        $('#'+param1+'-thumb .color').stop().fadeTo(500,'0');
    }
) ;