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

The feature of jQuery validation that enables the use of numbers in the "data-val-date" attribute for MVC

Showing HTML element when the model count is zero - ASP.NET MVC View

Checking for mouse button press during Firefox mouse movement

The process of transforming four columns into two columns and two rows

Display the input in the text box before making a selection from the dropdown menu

Utilizing jQuery variables to manage various events simultaneously

Determine the specific value of an HTML table cell by specifying the column name for a specific row

tips for expanding the size of your images

The Masonry Grid is leaving empty spaces unfilled

The CSS styles are not being completely applied to the PHP function

When you click on the submit button, it triggers the associated event

the combination of class and type functions as a jquery selector

What is the proper way to provide login information for a webservice through a jquery ajax request?

:host-selector for Angular Material dialog

Error message: Laravel Ajax function encountered an undefined variable

How can you leverage jQuery to append a new parameter to the existing URL without causing a page refresh?

Tailwind CSS - when it comes to styling, larger screen media queries are taking precedence over smaller media queries

XSLT - Dividing table into three columns while maintaining continuity on the same page

Unable to send JSON object using the Jquery.post() method

When using Jquery, input can be appended on the last child element when a key