Question

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

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

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')...

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

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

Answer 2

您正在img代码而不是a上应用该活动。改变它：

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

我的jquery结果中有一个错误

2 个答案: