jQuery mouseover mouseout event на <span> при наведении указателя мыши на div

Question

Я пытаюсь сделать заголовок появляться и исчезать над миниатюрами. Это мой титул пядь:

<span class="thumbtitle"><?php the_title(); ?></span> 

Это внутри <li> тега с классом «большого пальца».

JQuery Я использую это:

<script type='text/javascript'> 
$(document).ready(function() { 
    //settings 
    var opacity = 0, toOpacity = 1, duration = 0; 
    //set opacity ASAP and events 
    $('.thumbtitle').css('opacity',opacity).hover(function() { 
     $(this).fadeTo(duration,toOpacity); 
    }, function() { 
     $(this).fadeTo(duration,opacity); 
    } 
); 
}); 
</script> 

Теперь это прекрасно работает, но это работает, когда я наведите курсор мыши на названии ... я хотел бы, чтобы вызвать, когда я наведите курсор мыши на миниатюру, а не там, где заголовок позиционируется, так что, когда мышь перейдет в миниатюру (где-нибудь на ней), появится заголовок.

Может ли кто-нибудь помочь мне сделать это? Кроме того, могу ли я дать ему эффект анимации ... чтобы он постепенно появлялся и исчезал, а не просто мгновенно появлялся и исчезал?

Miro

Answer 1

здесь обновленное один: -

<script type='text/javascript'> 
    $(document).ready(function() { 
    //settings 
    var opacity = 0, toOpacity = 1, duration = 0; 
    //set opacity ASAP and events 
    $('li.thumb').hover(function() { 
     $(this).children('.thumbtitle').fadeTo(duration,toOpacity); 
    }, function() { 
     $(this).children('.thumbtitle').fadeTo(duration,opacity); 
    } 
); 
}); 
</script> 

Answer 2

Если вы не хотите показывать на PageLoad, установить начальную непрозрачность до 0, и установите его в 1, когда парил на. ..

Answer 3

Acording на название вам вопрос, я suposed, что вы HTML выглядит примерно так

This is the thumbnail: 
<div class="thumbnail"> 
    <li class="thumb"> 
     <span class="thumbtitle">Title<span> 
    </li> 
</div> 

Проверить это:

DEMO

$(document).ready(function() { 

    // Start with no title visible. 
    $('.thumb').hide(); 

    //settings 
    var opacity = 0, toOpacity = 1, duration = 0; 
    //set opacity ASAP and events 

    $('.thumbnail').hover(function() { 
     $(this).children('.thumb').fadeTo(duration , toOpacity); 
    }, function() { 
     $(this).children('.thumb').fadeTo(duration , opacity); 
    }); 
});