CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Felice Caricati
Felice Caricati

Reputation: 413

How can i activate .hover() function only on one element at time

I have a problem with using the function .hover (). it is a simple hover effect that slide in a div with some content, the problem is that i have more than one div in the page with thew same classes and This function animates all items at once, not just the one on which the muose step, how can I fix it? Thanks in advance this is my code

html: 

<div class="col-lg-4 col-md-4 col-sm-6 progetto hidden-xs">
    <div class="box-progetto-image">
        <?php the_post_thumbnail(); ?>
        <h2 class="titolo-progetto"><?php the_title(); ?></h2>
    </div>
    <div class="container-meta">
        <div class="container-cerchi">
            <a class="cerchio-progetto" href="<?php echo get_post_meta(get_the_ID(), 'yiw_progetti_link', true); ?>" title="<?php the_title(); ?>" rel="nofollow" target="_blank">
                <img src="<?php bloginfo('template_url'); ?>/img/link.png" alt="Visita il sito">
            </a>
            <a class="cerchio-progetto" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <img src="<?php bloginfo('template_url'); ?>/img/plus.png" alt="Maggiori informazioni">
            </a> 
        </div>
        <div class="layout-image">
            <?php  if (class_exists('MultiPostThumbnails')) : 
                MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'layout-image');
            endif; ?>
        </div>
    </div>
</div>

ad this is my jQuery :

script> 

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta').css('right', '0');
        $('.titolo-progetto').css('opacity' , '0')
    }, function() {
        $('.container-meta').css('right', '100%');
        $('.titolo-progetto').css('opacity' , '1')
    });

});

Upvotes: 4

Views: 292

Answers (3)

Felice Caricati
Felice Caricati

Reputation: 413

thanks for the reply, this method does not work but I found the solution

   $(document).ready(function() {

    alert('funziona');

    //funzione che anima l'hover della pagina portfolio
    $('.progetto').hover(function() {
        $(this).children('div.container-meta').css('right', '0');
        $(this).find('h2.titolo-progetto').css('opacity' , '0')
    }, function() {
        $(this).children('div.container-meta').css('right', '100%');
       $(this).find('h2.titolo-progetto').css('opacity' , '1')
    });        

});

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

This is just another way of writing @Guffa's answer:

$(document).ready(function() {
    $('.progetto').hover(function() {
        //target only the desired elements by using $(this).find()
        $(this).find('.container-meta').css('right', '0');
        $(this).find('.titolo-progetto').css('opacity' , '0')
    }, function() {
        //target only the desired elements by using $(this).find()
        $(this).find('.container-meta').css('right', '100%');
        $(this).find('.titolo-progetto').css('opacity' , '1')
    });
});

Upvotes: 3

Guffa
Guffa

Reputation: 700252

The problem is that you are using a selector that will find all elements with the same class. You can use the element that the event is triggered on as context for the search, that way the selector will only find elements inside it:

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta', this).css('right', '0');
        $('.titolo-progetto', this).css('opacity' , '0')
    }, function() {
        $('.container-meta', this).css('right', '100%');
        $('.titolo-progetto', this).css('opacity' , '1')
    });

});

Upvotes: 6

Related Questions