Question

我被困在如何有效地做到这一点。正如你所知，我正在学习如何使用jQuery，但是如果能够有效和准确地完成这项工作，我会非常乐意。

目前，在我的jsfiddle演示中，我希望在页面加载时突出显示中心图像（＃2）并“打开”。如果有人将鼠标悬停在另一个图像上，则默认（＃2打开）将变暗，另一个图像将变为全彩色并显示标题（现在在演示中，但是再次，没有有效编码）。然后当有人徘徊在他们所有人之外时，我会喜欢默认重新开始游戏。

如果有人有更好的编程建议，我们将不胜感激。我意识到我目前的代码不符合标准。

当前小提琴演示： http://jsfiddle.net/girdyshapiro/o8sky7v2/

jQuery(document).ready(function() {
                    jQuery(".box.two .darken img").css("opacity","1");
                    jQuery(".box.two .caption").css("color","rgba(255, 255, 255, 1)");


                    jQuery(".box.three .darken img").mouseenter( function (){
                            jQuery(".box.two .darken img").css("opacity","0.5");
                            jQuery(".box.two .caption").css("color","rgba(255, 255, 255, 0)");

                            });

                    jQuery(".box.two .darken img").mouseenter( function (){
                            jQuery(".box.two .darken img").css("opacity","0.5");
                            jQuery(".box.two .caption").css("color","rgba(255, 255, 255, 0)");

                            });

                    jQuery(".box.two .darken img").mouseout( function (){
                            jQuery(".box.two .darken img").css("opacity","0.5");
                            jQuery(".box.two .caption").css("color","rgba(255, 255, 255, 0)");

                            });
                    jQuery(".box.two .darken img").mouseenter( function (){
                            jQuery(".box.two .darken img").css("opacity","1");
                            jQuery(".box.two .caption").css("color","rgba(255, 255, 255, 1)");

                            });



            });

谢谢！

Answer 1

您可以使用CSS定义两种不同的状态（默认和活动），然后使用jQuery

应用该类

CSS

.box img {
opacity: 0.5;
}
.box .caption {
color: rgba(255, 255, 255, 0);
}

.box.active img {
opacity: 1;
}
.box.active .caption {
color: rgba(255, 255, 255, 1);
}

JS

var defaultItem = jQuery(".box.two");

var reset = function (resetAll) {//if resetAll is false, highlight the default item
    jQuery(".box").removeClass('active');
    if(!resetAll) {
        setActive(defaultItem);
    }

}

var setActive = function (el) {
    el.addClass('active');
}

jQuery(".box").on('mouseenter', function () {
    reset(true);
    setActive(jQuery(this));
});


jQuery(".box").on('mouseleave', function () {
    reset(); //comment this line if you want the box to be active since mouse pointer goes over another box
});

reset();

jQuery图像悬停显示默认状态的标题

1 个答案:

CSS

JS