Question

Trying to do an image caption but can’t figure the “this” object selector right to only get the image I am rolling over.

The caption works fine but hovering one triggers all. Below is what I have to try to trigger one but doesn’t work. Can anyone tell me how to put in the right selector?

HTML

<ul id="columns">
        <li class="col-1">
            <div class="photo1">
                    <p>I am doing great. I love this place and I would love to work here.</p>
            </div>
            <div class="photo2">
                <p>I am doing great. I love this place and I would love to work here.</p>
            </div>
            <div class="photo3">
                <p>I am doing great. I love this place and I would love to work here.</p>
            </div>
            <div class="photo4"></div>
            <div class="photo5"></div>  
        </li>
        <li class="col-2">
            <div class="photo6"></div>
            <div class="photo7"></div>
            <div class="photo8"></div>
            <div class="photo9"></div>
            <div class="photo10"></div>
        </li>
        <li class="col-3">
            <div class="photo11"></div>
            <div class="photo12"></div>
            <div class="photo13"></div>
            <div class="photo14"></div>
            <div class="photo15"></div>
        </li>
</ul>

CSS

.photo1 {
        position: relative;         
        background: url(../img/sncc_teaser.jpg) no-repeat;
        width: 250px;
        height: 339px;
        margin-bottom: 5px;
    }
ul li p {
    display: none;
    position: absolute;
    background-color: gray;
    width: 250px;
    color: white;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    bottom: 10px;
    left: 0px;

}

jQuery

$(document).ready(function(){
    $(".col-1").hover
        (
            function($e) 
            {
                $("li p", this).show();
            },

            function($e) 
            {
                $("li p", this).hide();
            }
    );
});

Answer 1

Hover on the DIV, not the entire column:

$(".col-1 div").hover
        (
            function($e) 
            {
                $(this).find('p').show();
            },

            function($e) 
            {
                $(this).find('p').hide();
            }
    );