jQuery添加和删除'活动'类加悬停

我有一个缩略图定义列表。他们是50％不透明与'拇指'类。当徘徊100％不透明度。当点击100％不透明度加上改变'拇指'到'缩略图'类jQuery添加和删除'活动'类加悬停

到目前为止，我的蹩脚代码的作品，唯一的事情是我无法获得点击100％的吨。

 
dl { 
    width: 700px; 
} 
dt { 
    clear: left; 
    float: right; 
    width: 400px; 
    height:80px; 
    margin: 0 0 10px 0; 
    background:orange; 
} 
dd.thumb, dd.thumbActive { 
    clear: none; 
    float: left; 
    margin: 0 0 10px 0; 
    background:black; 
} 
dd { 
    clear: right; 
}

 
    jQuery.noConflict(); 

    jQuery(document).ready(function() { 

     /* just for debugging */ 
     function showClassNames() { 
       jQuery("dt").each(function() { 
        var className = jQuery(this).next().attr('class'); 
        jQuery(this).text(className); 
       }); 
     }; 
     showClassNames(); 

     /* resets all thumbs (50% alpha, .thumb classname) */ 
     function resetThumbs() { 
       jQuery("dd").each(function() { 
       jQuery(this).removeClass("thumbActive"); 
       jQuery(this).addClass("thumb"); 
       jQuery("dd img").css('opacity', 0.5); 
      }); 
     }; 

     // half opacity for all thumbs except the first one (active) 
     jQuery("dd:not(.thumbActive) img").css('opacity', 0.5); 
     jQuery("dd img").hover(
      function() { jQuery(this).css('opacity', 1.0); }, 
      function() { jQuery(this).css('opacity', 0.5); } 
     ); 

     jQuery("a.thumbClick").click(function() { 
      resetThumbs(); 
      jQuery(this).parent().removeClass("thumb"); 
      jQuery(this).parent().addClass("thumbActive"); 
      jQuery(this).css('opacity', 1.0); 
      showClassNames();   
      return false; 
     }); 

    }); // end document ready

<div id="album-canvas-left" style="width:930px; " >   
<dl id="thumb-list" > 
    <dt></dt> 
    <dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd> 
    <dd></dd> 
</dl>

来源

2009-12-26 FFish

我只是将你的不透明度设置移动到CSS，只是在jQuery中添加/删除类。事实上，如果你不是针对IE6的，你可以在CSS中使用:hover来处理不透明。

与IE6的支持

dd img{ 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 

dd.hover img, dd.thumbActive img { 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

然后改变你的hover这样：

jQuery("dd").hover(
    function() { jQuery(this).addClass('hover'); }, 
    function() { jQuery(this).removeClass('hover'); } 
);

WITHOUT IE6的支持

dd img{ 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 

dd:hover img, dd.thumbActive img{ 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

而只是删除您完全调用。

来源

2009-12-26 18:06:02

当您单击鼠标，然后关闭悬停输出功能仍然被称为该设置不透明度回为0.5

你应该悬停出函数（悬停函数的第二个参数）检查并确保对象的类未设置为thumbActive。

来源

2009-12-26 17:22:10

感谢冰山杰夫！ – FFish 2009-12-26 23:22:39

多亏了这两个，我想出了这个：

 
dd img { 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 
/* IE6 does not support :hover */ 
dd.hover img { 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

 
jQuery("dd").hover(
    function() { 
     jQuery(this).addClass('hover'); 
     showClassNames(); 
    }, 
    function() { 
     if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); 
    } 
); 

jQuery("a.thumbClick").click(function() { 
    jQuery("dd").removeClass("hover active"); 
    jQuery(this).parent().addClass("hover active");  
    return false; 
});

<dl id="thumb-list" > 
    <dt></dt> 
    <dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd> 
    <dd></dd> 
</dl>

来源

2009-12-26 23:25:41 FFish

jQuery添加和删除'活动'类加悬停

回答

相关问题