CODEWITHSUNDEEP
jquerycsshtmlhover
JD Pirtle
JD Pirtle

Reputation: 3

Show/Hide Only One DIV With JQuery

I have a page of images that I want to show/hide the label of on mouseover. The images are also links, and the div is called ".smallproj". The JQuery script works great, but of course shows all instances of .smallproj p when I hover over any one instance of .smallproj a. I know I need to alter the script such that only the instance of .smallproj that's being hovered over shows, but what is the best way to do that in this case?

JQuery script:

$(".smallproj a").on({
    mouseover: function() {
        $(".smallproj p").show();
    },      
    mouseout: function() {
        $(".smallproj p").hide();
    }       
});

Upvotes: 0

Views: 777

Answers (3)

antialiasis
antialiasis

Reputation: 831

You'll want to use the this keyword, which refers to the element that is targeted by the event, and then traverse from it (the a element being hovered over) to the p element you want to show. The general case, making no assumptions about where they are in relation to one another except that they're both inside something with the .smallproj class, would be something like this:

$(".smallproj a").on({
    mouseover: function() {
        $(this).closest(".smallproj").find("p").show();
    },      
    mouseout: function() {
        $(this).closest(".smallproj").find("p").hide();
    }       
});

Upvotes: 0

Niels
Niels

Reputation: 49929

You can use various ways. Some examples:

Same Level

$(".smallproj a").on({
    mouseover: function() {
        $(this).siblings("p").show();
    },      
    mouseout: function() {
        $(this).siblings("p").hide();
    }       
});

Inside the parent

$(".smallproj a").on({
    mouseover: function() {
        $(this).parent().find("p").show();
    },      
    mouseout: function() {
        $(this).parent().find("p").hide();
    }       
});

Information:

  1. Siblings
  2. Parent

Upvotes: 0

user1477388
user1477388

Reputation: 21430

I think you could do:

$('.smallproj p').hover(function(){
  $(this).show();
});

Or, it looks like you also want to hover the link, so try:

$('.smallproj a').hover(function(){
  $(this).find('p').show();
});

Upvotes: 1

Related Questions