Jquery问题影响所有元素，而不仅仅是一个元素

我目前正在做一个小项目，在这个项目中，我有几个带有img、h1标记和p标记的div元素。它们都有相同的类名，我要做的是给它们添加一些css效果，这样h1标记和p标记就会滑入框架，当我将鼠标悬停在包含它们的div元素上时，它们就会变得可见

这里的问题是，当我只希望当前悬停的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;
    }

.col-md-4{
边缘顶部：30px；
边缘底部：26px；
颜色：白色；
}
.标题-1{
利润上限：-260px；
文本对齐：居中；
位置：相对位置；
顶部：-104px；
不透明度：0；
过渡：顶部1s，不透明度1s；
}
.第1款{
边缘顶部：160px；
文本对齐：居中；
位置：相对位置；
顶部：60px；
不透明度：0；
过渡：顶部1s，不透明度1s；
}
.标题-2{
利润上限：-260px；
文本对齐：居中；
位置：相对位置；
顶部：-20px；
不透明度：1；
过渡：顶部1s，不透明度1s；
}
.第2款{
边缘顶部：160px；
文本对齐：居中；
位置：相对位置；
顶部：-20px；
不透明度：1；
过渡：顶部1s，不透明度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>

$（'document'）.ready（函数（）{
$（'.col-md-4'）.mouseover（函数（）{
$（'h1'）.addClass（'title-2'）；
$（'h1'）.removeClass（'title-1'）；
$（'p'）.addClass（'段落2'）；
$（'p'）。removeClass（'第1段'）；
});
$（'.col-md-4'）.mouseleave（函数（）{
$（'h1'）.addClass（'title-1'）；
$（'h1'）.removeClass（'title-2'）；
$（'p'）.addClass（'段落1'）；
$（'p'）。removeClass（'段落2'）；
});
});

下面是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关键字来定位当前选定的项目，但我不知道如何使用它来获得我所编写的代码想要的效果。任何帮助都会非常有用。

要仅针对每个

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

---

要仅针对每个

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

---

您的脚本应该像这样更改

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

$（'document'）.ready（函数（）{
$（'.col-md-4'）.mouseover（函数（）{
$（this.find（'h1'）.addClass（'title-2'）；
$（this.find（'h1'）.removeClass（'title-1'）；
$（this.find（'p'）.addClass（'段落2'）；
$（this.find（'p'）.removeClass（'段落1'）；
});
$（'.col-md-4'）.mouseleave（函数（）{
$（this.find（'h1'）.addClass（'title-1'）；
$（this.find（'h1'）.removeClass（'title-2'）；
$（this.find（'p'）.addClass（'段落1'）；
$（this）.find（'p'）.removeClass（'段落2'）；
});
});

您的脚本应该更改为

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

$（'document'）.ready（函数（）{
$（'.col-md-4'）.mouseover（函数（）{
$（this.find（'h1'）.addClass（'title-2'）；
$（this.find（'h1'）.removeClass（'title-1'）；
$（this.find（'p'）.addClass（'段落2'）；
$（this.find（'p'）.removeClass（'段落1'）；
});
$（'.col-md-4'）.mouseleave（函数（）{
$（this.find（'h1'）.addClass（'title-1'）；
$（this.find（'h1'）.removeClass（'title-2'）；
$（this.find（'p'）.addClass（'段落1'）；
$（this）.find（'p'）.removeClass（'段落2'）；
});
});

您可以像

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

/**
*DOM就绪时执行方法
*@return{[type]}[description]
*/
$（'document'）.ready（函数（）{
//鼠标悬停在脚本上
$（'.col-md-4'）.mouseover（函数（）{
//将本地变量中的$（this）对象收集为$this
var$this=$（this）；
//查找.col-md-4当前容器内的标记，事件发生的位置
$this.find（'h1'））
//首先添加欲望类
.addClass（'title-2'）
//现在使用jQuery Channing方法WOAH删除类！！
.removeClass（“标题1”）；
//对于
标记，与之前针对的标记相同