Question

我的HTML中的

我想要改变类，但我有更多的部分，所以我想影响我的鼠标悬停部分！

<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 -->

在jQuery中我想用这个来实现一个部分

$(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

使用此

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

Answer 2

首先，您可以选择特定元素，然后每次都可以使用$(this).children('p.source')代替$('section.example p.design')。它将为您提供编辑一个特定元素的可能性，而不是所有具有指定类的元素。

Answer 3

这是 jsfilddle

你有两个不平衡的</div>元素，我已经在小提琴中删除了。

您可能希望使用mouseenter而不是mousemove。

除了你想要使用Rohit已经描述的find之外。

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'
        });
    });
});

我如何在jquery中使用它

3 个答案: