Question

我目前正在开发一个小项目，其中我有几个带有img，h1标签和p标签的div元素。它们每个都有相同的类名，而我正在尝试做的是给它添加一些css效果，这样当我将鼠标悬停在包含它们的div元素上时，h1标签和p标签会滑入框架并变为可见。

这里的问题是，当我只想要当前正在盘旋的div元素产生这种效果时，我使用的代码会对所有div元素产生效果。

这是我的代码：

css

<style>
    .col-md-4 {
        margin-top: 30px;
        margin-bottom: 26px;
        color: white;


    }



    .title-1 {
        margin-top: -260px;
        text-align: center;
        position: relative;
        top: -104px;
        opacity: 0;
        transition: top 1s, opacity 1s;


    }

    .paragraph-1 {
        margin-top: 160px;
        text-align: center;
        position: relative;
        top: 60px;
        opacity: 0;
        transition: top 1s, opacity 1s;

    }

    .title-2 {
        margin-top: -260px;
        text-align: center;
        position: relative;
        top: -20px;
        opacity: 1;
        transition: top 1s, opacity 1s;
    }

    .paragraph-2 {
        margin-top: 160px;
        text-align: center;
        position: relative;
        top: -20px;
        opacity: 1;
         transition: top 1s, opacity 1s;
    }

这是jquery代码

<script>
    $('document').ready(function() {
        $('.col-md-4').mouseover(function() {
            $('h1').addClass('title-2');
            $('h1').removeClass('title-1');
            $('p').addClass('paragraph-2');
            $('p').removeClass('paragraph-1');

        });

        $('.col-md-4').mouseleave(function() {
            $('h1').addClass('title-1');
            $('h1').removeClass('title-2');
            $('p').addClass('paragraph-1');
            $('p').removeClass('paragraph-2');
        });
    });



</script>

这就是html的样子

 <div class="col-md-4">
                <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>

            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

            <div class="col-md-4">
                <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>

            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                 <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

我知道我想使用this关键字来定位当前选中的项目，但我只是不知道如何使用我编写的代码获得我想要的效果。任何帮助都会非常有帮助。

Answer 1

您的脚本应该更改

<script>
    $('document').ready(function() {
        $('.col-md-4').mouseover(function() {

        $(this).find('h1').addClass('title-2');
            $(this).find('h1').removeClass('title-1');
            $(this).find('p').addClass('paragraph-2');
           $(this).find('p').removeClass('paragraph-1');

        });

        $('.col-md-4').mouseleave(function() {
            $(this).find('h1').addClass('title-1');
            $(this).find('h1').removeClass('title-2');
            $(this).find('p').addClass('paragraph-1');
           $(this).find('p').removeClass('paragraph-2');
        });
    });



</script>

Answer 2

要仅定位每个col-md-4元素中的子元素，您可以使用this和find()，就像这样

$( this ).find('element').addClass('class');

通过合并removeClass / addClass

，您可以提高代码效率

$('document').ready(function() {
    $('.col-md-4').mouseover(function() {
        $( this ).find('h1').removeClass('title-1').addClass('title-2');
        $( this ).find('p').removeClass('paragraph-1').addClass('paragraph-2');
    });

    $('.col-md-4').mouseleave(function() {
        $( this ).find('h1').removeClass('title-2').addClass('title-1');
        $( this ).find('p').removeClass('paragraph-2').addClass('paragraph-1');
    });
});

另一个选择是使用toggleClass，可以一次删除和添加类。但请注意，如果您要删除的类首先未在元素上设置，则两个类都将关闭或打开。

$('document').ready(function() {
    $('.col-md-4').mouseover(function() {
        $( this ).find('h1').toggleClass('title-1 title-2');
        $( this ).find('p').toggleClass('paragraph-1 paragraph-2');
    });

    $('.col-md-4').mouseleave(function() {
        $( this ).find('h1').toggleClass('title-2 title-1');
        $( this ).find('p').toggleClass('paragraph-2 paragraph-1');
    });
});

Answer 3

您可以使用

这样的脚本

/**
 * Execute Method when DOM ready
 * @return {[type]}   [description]
 */
$('document').ready(function() {
  // mouse over script
  $('.col-md-4').mouseover(function() {
    // collect $(this) object in local var as $this
    var $this = $(this);
    // find <H1> tag inside .col-md-4 current container, where event happening
    $this.find('h1')
      // first add desire class
      .addClass('title-2')
      // now remove class by using jQuery Channing Method WOAH!!
      .removeClass('title-1');
    // same for <P> tag as done before for <H1>
    $this.find('p').addClass('paragraph-2').removeClass('paragraph-1');

  });

  // mouse leave script
  $('.col-md-4').mouseleave(function() {
    // collect $(this) object in local var as $this
    var $this = $(this);
    // find <H1> tag inside .col-md-4 current container, where event happening
    $this.find('h1')
      // first add desire class
      .addClass('title-1')
      // now remove class by using jQuery Channing Method WOAH!!
      .removeClass('title-2');
    // same for <P> tag as done before for <H1>
    $this.find('p').addClass('paragraph-1').removeClass('paragraph-2');
  });
});

LIVE DEMO

Jquery发布影响所有元素而不是一个元素

3 个答案: