Jquery issues effecting all element instead of just one

Question

I'm currently working on a little project in which I have several div elements with an img, h1 tag, and a p tag. They each have the same class name, and what I'm trying to do is place some css effects to it so that the h1 tag and p tag slide into frame and become visible when I hover over the div element that they are contained in.

The problem here is that the code I am using makes the effects to all div elements when I only want the div element that is currently being hovered over to have this effect.

Here is my code:

The 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;
    }

Here is the jquery code

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

And here is what the html looks like

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

I know that I want to use the this keyword in order to target that currently selected item, but I just dont know how to do it with to get the effects that I want with the code that I have written. Any help would be extremely helpful.

Answer 1

To target only the children within each col-md-4 element, you use this and find(), like this

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

---

You can make your code much more efficient, by combining 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');
    });
});

---

Another option is to use toggleClass, where one can remove and add classes in one go. Note though, if the class you are about to remove is not set on the element in the first place, both classes will be either off or on.

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

You can use script like

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

Answer 3

Your script should be change Like

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