jQuery 添加和删除“活动”类以及悬停

Question

我有一个带有缩略图的定义列表。 它们是“拇指”类的 50% 不透明度。 悬停时为 100% 不透明度。 当点击 100% 不透明度加上将 'thumb' 更改为 'thumbactive' 类

到目前为止，我的蹩脚代码有效，唯一的问题是我无法在点击时 100% 获得 tn。

dl { 宽度：700px； } dt { 清除：左； 浮动：对； 宽度：400px； 高度：80px； 边距：0 0 10px 0； 背景：橙色； } dd.thumb, dd.thumbActive { 明确：无； 向左飘浮; 边距：0 0 10px 0； 背景：黑色； } dd { 明确：正确； } jQuery.noConflict(); jQuery(文档).ready(函数() { /* 仅用于调试 */ 函数 showClassNames() { jQuery("dt").each(function() { var className = jQuery(this).next().attr('class'); jQuery(this).text(className); }); }; 显示类名（）； /* 重置所有拇指（50% alpha，.thumb 类名）*/ 功能重置拇指（）{ jQuery("dd").each(function() { jQuery(this).removeClass("thumbActive"); jQuery(this).addClass("thumb"); jQuery("dd img").css('不透明度', 0.5); }); }; // 除第一个拇指外，所有拇指的半透明度（活动） jQuery("dd:not(.thumbActive) img").css('不透明度', 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() { 重置拇指（）； jQuery(this).parent().removeClass("thumb"); jQuery(this).parent().addClass("thumbActive"); jQuery(this).css('opacity', 1.0); 显示类名（）； 返回假； }); }); // 结束文档准备就绪

<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>

Answer 1

感谢双方，我想出了这个：

dd img { 不透明度：0.5； -moz 不透明度：0.5； 过滤器：alpha（不透明度=50）； } /* IE6 不支持:hover */ dd.hover img { 不透明度：1.0； -moz-不透明度：1.0； 过滤器：阿尔法（不透明度= 100）； } jQuery("dd").hover( 功能（） { jQuery(this).addClass('hover'); 显示类名（）； }, 功能（） { if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); } ); jQuery("a.thumbClick").click(function() { jQuery("dd").removeClass("悬停活动"); jQuery(this).parent().addClass("悬停活动"); 返回假； });

<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>

Answer 2

我只是将您的不透明度设置移动到 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'); }
);

不支持 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 电话。

Answer 3

当您点击鼠标离开时，悬停功能仍在被调用，这会将不透明度设置回 .5

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