我如何在jQuery中使用它

Question

in my HTML i want change class , but i have more sections ,so i want to effect the section waht i mouseover !!!

<section class="grid example">
                        </div>
                        <div class="row grids">
                            <p class="design">Footer</p><p class="source">row</p>
                        </div>
                    </div>
                </section> <!-- End example 1 -->

in jQuery i want use this to effect one section

$(function(){
$('section.example').mousemove(function() {
        $('section.example p.source').css({
            display: 'block'
        });
        $('section.example p.design').css({
            display: 'none'
        });
    });

    $('section.example').mouseleave(function() {
        $('section.example p.source').css({
            display: 'none'
        });
        $('section.example p.design').css({
            display: 'block'
        });
    });
});

Answer 1

use this

$(this).find('p.source').css({
        display: 'block'
    });

Answer 2

First you can choose specific element, and then you can use $(this).children('p.source') instead of $('section.example p.design') every time. It will give you possibility to edit that one specific element, not all which have specified classes.

Answer 3

Here is a jsfilddle

You have two unbalanced </div> elements that I have removed in the fiddle.

You probably want to use mouseenter rather than mousemove .

Other than that you want to use find as already described by Rohit.

HTML:

<section class="grid example">                        
    <div class="row grids">
        <p class="design">Footer</p>
        <p class="source">row</p>
    </div>                    
</section> <!-- End example 1 -->

Javascript:

$(function(){
   $('section.example').mouseenter(function() {    
        $(this).find('p.source').css({
            display: 'block'
        });
       $(this).find('p.design').css({  
            display: 'none'
        });
    });

    $('section.example').mouseleave(function() {

        $(this).find('p.source').css({   
            display: 'none'
        });
        $(this).find('p.design').css({
            display: 'block'
        });
    });
});