Question

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

Answer 1

我想你想把悬停处理程序放在具有灰色背景颜色的元素上（参见fiddle）：

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

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

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

Answer 2

基本上你说灰色背景的任何部分都会在图像中消失？你会这样做的。

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

我认为问题出在$(".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 4

试试这个小提琴：

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

Jquery的：

(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);

fadein fadeout背景图像

4 个答案: