jQuery - mouseover() / fadeIn() 不起作用

Question

http://jsfiddle.net/rR6gC/

每当有人将鼠标推到每个条上时，我都会尝试在栏内显示信息，但它根本不起作用。我能够让它从纯CSS做出反应，但是当尝试使用jQuery函数时，没有任何效果。

JavaScript/jQuery

$('.score').mouseover(function () {
    $(this).fadeIn('slow');
});
$('.score').mouseeleave(function () {
    $(this).fadeOut('slow');
});

.CSS

.score{
color:white;
font-size:2em;
width:100%;
text-align:center;
display:inline-block;
position:relative;
}

Answer 1

据

我所知，您想隐藏5并在鼠标悬停在栏上时显示它

1. mouseeleave有错别字
2. 您需要为条形包装器元素编写 mouseenter 和 mouseleave 事件，然后在鼠标进入/离开时显示/隐藏其中的 score 元素

尝试

$('.scoreWrap2 .score').hide()
$('.scoreWrap2').mouseover(function () {
    $(this).find('.score').stop(true, true).fadeIn('slow');
});
$('.scoreWrap2').mouseleave(function () {
    $(this).find('.score').stop(true, true).fadeOut('slow');
});

演示：小提琴