Jquery problems impacting every element rather than only one

Question

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible when hovering over the specific div element they are within.

The issue I'm facing is that the code I've implemented applies the effects to all div elements instead of just the one being hovered on.

Below is a glimpse of 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's the jQuery snippet

<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 this is how the HTML structure 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>

             <!-- More similar divs -->

I understand the need to use the 'this' keyword to target the current item, but I'm struggling to implement it correctly in order to achieve the desired effects with my existing code. Any assistance would be greatly appreciated.

jquery css

Answer 1

Answer №1

Your code needs to be modified as follows:

<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

Your code needs to be modified as follows:

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

Answer №2

To specifically target the children within each col-md-4 element, you can utilize this along with find(), as shown below:

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

You have the opportunity to optimize your code by merging removeClass and 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');
    });
});

An alternative approach is to employ toggleClass, which enables one to remove and add classes simultaneously. It's worth noting that if the class being removed isn't initially present on the element, both classes will either be deactivated or activated.

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

To specifically target the children within each col-md-4 element, you can utilize this along with find(), as shown below:

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

You have the opportunity to optimize your code by merging removeClass and 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');
    });
});

An alternative approach is to employ toggleClass, which enables one to remove and add classes simultaneously. It's worth noting that if the class being removed isn't initially present on the element, both classes will either be deactivated or activated.

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

Answer №3

You have the option to employ a script similar to this:

/**
 * Perform Method when DOM is ready
 * @return {[type]}   [description]
 */
$('document').ready(function() {
  // script for mouse over event
  $('.col-md-4').mouseover(function() {
    // storing $(this) object in a local variable as $this
    var $this = $(this);
    // locating <H1> tag within .col-md-4 current container where the event is occurring
    $this.find('h1')
      // initially adding desired class
      .addClass('title-2')
      // then removing class using jQuery Chaining Method WOAH!!
      .removeClass('title-1');
    // same approach for <P> tag as previously done for <H1>
    $this.find('p').addClass('paragraph-2').removeClass('paragraph-1');

  });

  // script for mouse leave event
  $('.col-md-4').mouseleave(function() {
    // storing $(this) object in a local variable as $this
    var $this = $(this);
    // locating <H1> tag within .col-md-4 current container where the event is occurring
    $this.find('h1')
      // initially adding desired class
      .addClass('title-1')
      // then removing class using jQuery Chaining Method WOAH!!
      .removeClass('title-2');
    // same approach for <P> tag as previously done for <H1>
    $this.find('p').addClass('paragraph-1').removeClass('paragraph-2');
  });
});

VIEW LIVE DEMO

Answer 6

You have the option to employ a script similar to this:

/**
 * Perform Method when DOM is ready
 * @return {[type]}   [description]
 */
$('document').ready(function() {
  // script for mouse over event
  $('.col-md-4').mouseover(function() {
    // storing $(this) object in a local variable as $this
    var $this = $(this);
    // locating <H1> tag within .col-md-4 current container where the event is occurring
    $this.find('h1')
      // initially adding desired class
      .addClass('title-2')
      // then removing class using jQuery Chaining Method WOAH!!
      .removeClass('title-1');
    // same approach for <P> tag as previously done for <H1>
    $this.find('p').addClass('paragraph-2').removeClass('paragraph-1');

  });

  // script for mouse leave event
  $('.col-md-4').mouseleave(function() {
    // storing $(this) object in a local variable as $this
    var $this = $(this);
    // locating <H1> tag within .col-md-4 current container where the event is occurring
    $this.find('h1')
      // initially adding desired class
      .addClass('title-1')
      // then removing class using jQuery Chaining Method WOAH!!
      .removeClass('title-2');
    // same approach for <P> tag as previously done for <H1>
    $this.find('p').addClass('paragraph-1').removeClass('paragraph-2');
  });
});

VIEW LIVE DEMO

Jquery problems impacting every element rather than only one

Answer №1

Answer №2

Answer №3

Similar questions

Sending information to the styles feature in Angular 2

What is the best way to display lengthy content using a pair of HTML tags?

JavaScript preloader function isn't functioning properly when paired with a button

Counting checkboxes in jQuery version 1.9

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

What causes the sub-menus to move even when they are set to position: absolute?

What is the best way to select a specific descendant class deep within the DOM using jQuery?

Is it possible to verify the user's authentication by confirming the presence of a JWT in their localStorage?

Error message: "Invalid syntax detected while using the jQuery UI select plugin"

What is the method for stretching the navbar and content to fill the entire viewport in Bootstrap?

What is the complete pathway in CSS?

Is async programming synonymous with multi-threading?

Deactivate a function when the dropdown input is selected

Ways to access text content in an HtmlTableCellElement

Navigating Links Inside a jQuery Mobile Panel

A versatile HTML5 element that can be placed anywhere on the webpage

Troubleshooting: Issues with jQuery's clone() function

Switching the navigation menu using jQuery

Tips on updating service variable values dynamically

CakePHP includes built-in jQuery pagination and sorting functionality