jquery 图像标题

Question

试图做一个图像标题，但无法确定“这个”对象选择器只获得我正在滚动的图像。

标题工作正常，但悬停一个会触发所有。下面是我必须尝试触发一个但不起作用的方法。谁能告诉我如何放入正确的选择器？

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

将鼠标悬停在 DIV 上，而不是整个列上:

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

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