Question

I want to make this: when mouseover on one picture, show its title. I use the below code, when I hover the picture, all the pictures’ titles are shown. How do I change the code to make just one title show?

<script type="text/javascript">       
        $(function() {
            $('.image').each(function() {
                $(this).hover(
                    function() {
                        $('.title').animate({ opacity: 1 })
                    },
                    function() {
                       $('.title').stop().animate({ opacity: 0});
                   })
                });
        });
</script>

<div class="image"><img src="img1" /><p class="title">text1</p></div>
<div class="image"><img src="img2" /><p class="title">text2</p></div>
<div class="image"><img src="img3" /><p class="title">text3</p></div>

Answer 1

Try changing this $('.title') to $('.title', this)

See: http://api.jquery.com/jQuery/