jquery - 淡入淡出背景图片

Question

在这里，我给你一个链接jsfiddle.net/swati712/4Zx5q，你可以通过点击button左上角的绿色圆圈看到，背景图像显示为 fadeIn jquery 函数，一旦你离开图像区域，那个图像得到淡出和灰色背景重新出现。但是现在我想当有人将鼠标悬停在任何灰色区域上时，图像就会出现，而不仅仅是单击绿色按钮。我知道这是一项非常简单的任务，但在这方面需要帮助。

Answer 1

本质上，您是在说图像中灰色背景的任何部分淡入淡出？你会这样做。

(function ($) {
    $ (document).ready(function () {
        //TODO: Code here
        $('#left').hover(function() {
            $(".main1").fadeIn();
            $(".logo").fadeOut();
            $(".logo-left").fadeIn();
        }, function () {
        });

        $('.hide').hover(function () {
        }, function () {
            $(this).fadeOut();
            $(".logo").fadeIn();
            $(".logo-left").fadeOut();
        });
    });
})(jQuery);

Answer 2

我认为问题在于$(".logo-left")，您必须更改为然后$("#left")更改所有页面，如下所示：$('.showhide')$(document)

(function($) {
    $(document).on('ready', function (){
        //TODO: Code here
        $(document).hover(function () {
            $(".main1").fadeIn();
            $(".logo").fadeOut();
            $("#left").fadeIn(); // here
        }, function () {

        });

        $('.hide').hover(function () {
        }, function(){
            $(this).fadeOut();
            $(".logo").fadeIn();
            $("#left").fadeOut();
        });
    });
})(jQuery);

Answer 3

我认为您想将悬停处理程序放在具有灰色背景色的元素上（请参见小提琴）：

$('#container').hover(function() {
    $(".main1").fadeIn();
    $(".logo").fadeOut();
    $(".logo-left").fadeIn();
}, function(){
});

如果您不介意将悬停功能限制为灰色元素，并且想要在整个页面上捕获事件，则可以更改 jquery 选择器以定位该document元素：

$(document).hover(function() { /* hover code here */});

Answer 4

试试这个小提琴：

http://jsfiddle.net/Hive7/4Zx5q/8/

查询：

(function($) {
    $ (document).ready(function(){
        //TODO: Code here
        $('.main').hover(function() {
            $(".main1").fadeIn();
            $(".logo").fadeOut();
            $(".logo-left").fadeIn();
        }, function(){
        });

        $('.hide').hover(function() {
        }, function(){
            $(this).fadeOut();
            $(".logo").fadeIn();
            $(".logo-left").fadeOut();
        });
    });


})(jQuery);