0

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

到目前为止，我糟糕的代码有效，唯一的问题是我无法在点击时 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>

4

3 回答 3

2

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

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

于 2009-12-26T18:06:02.340 回答
1

当您单击鼠标时，悬停功能仍在被调用，这将不透明度设置回 0.5

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

于 2009-12-26T17:22:10.417 回答
0

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

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>
于 2009-12-26T23:25:41.463 回答