javascript - .mouseover在jQuery中不起作用

当鼠标悬停在jquery中的对象函数上时，我试图做一个简单的“一个项目淡出，另一个项目淡入”。不幸的是，它似乎不起作用。
这是js：

var fadeout = function(target) //fade out the logo and run fadein (fade in the skull)
{
$(target +' .logo').fadeTo(400,0,fadein(target));
};

var fadein = function(target) //fade in the skull
{
    $(target +' .skull').fadeTo(500,1);
};

//trigger fadein when mouse is over an option
$('#mortal').mouseover(fadeout('#mortal')); //mortal

当我在Chrome的控制台中检查代码时，它可以正常工作，但是当我将鼠标悬停在#mortal上时，什么也没发生。

以下是相关的HTML：

<div class="choice_option" id="mortal">
            <img class="logo" src="img\text\230px-WorldofDarknessLogo.png"></img>
            <img class="skull" src="img\skulls\mortal.png"></img>
</div>

以及相关的CSS：

.logo{ /* text logo in each choice_option */
position: absolute;
z-index: 0;
}
.skull{ /* skull in each choice_option */
position: absolute;
z-index: 1;
opacity: 0;
}

我想念什么？

最佳答案

您的代码非常复杂。设置callback处理程序时，只需使用mouseover参数。尝试这个：

$('#mortal').mouseover(function() {
    var $logo = $('.logo', this);
    var $skull = $('.skull', this);
    $logo.fadeOut(function() {
        $skull.fadeIn();
    });
});

另外，img标签应该是自动关闭的：

<div class="choice_option" id="mortal">
    <img class="logo" src="img\text\230px-WorldofDarknessLogo.png" />
    <img class="skull" src="img\skulls\mortal.png" />
</div>

最后，.skull div应该为display: none，而不是opactiy: 0才能使fadeIn或fadeOut正常工作。

Example fiddle