jquery 图片悬停效果说明

Question

我目前在一个 html 页面上有 4 张内联图片，它们是人物图片。我想知道如何在图像上制作悬停效果 (jQuery)，以便当鼠标悬停在上方时，页面底部会扩展，并且该人的段落描述会出现在所有图像下方。

我想用这个 HTML 来做

  <div class="page2">
    <a name="team" class="smoothScroll"></a>
    <h2>Meet the Team</h2>
    <div class="firstline">
    <div class="st">
        <ul>

        <li>
            <img src="bob.jpg">
            <p>Bob</p>
        </li>

        <li>
            <img src="bob.jpg">
            <p>Bob</p>
        </li>            

        <li>
            <img src="someone.jpg">
            <p>Someone</p>
        </li>   

        <li>
            <img src="someone.jpg">
            <p>Someone</p>
        </li>

        </ul>

        </div>




        <div class="nd">
        <ul>
        <li>
            <img src="bob.jpg">
            <p>bob</p>
            </li>
        <li>
            <img src="bob.jpg">
            <p>bob</p>
            </li>
        <li>
            <img src="someone.jpeg">
            <p>someone</p> </li>

        </ul>
        </div>

        </div>

CSS

.st img {
    max-height: 150px;
    max-width: 240px;

}
.st li {
    padding: 30px;
    padding-left: 50px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
}

.nd img {

    max-width: 250px;

}
.nd li {
    padding-left: 125px;
    padding-bottom: 80px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
}


.firstline p{
    display: none;
}

img:hover + p{
    display: block;
}

Answer 1

更新

使用您的代码，您根本不需要 jQuery。您可以只定位兄弟 p:

p{
   display: none;
}

img:hover + p{
   display: block;
}

EXAMPLE 3

---

上一个:

只要图像及其描述是兄弟或后代，您就可以使用 CSS 执行此操作:

HTML

<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<div class="content person1">
    <p>Person 1</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person2">
    <p>Person 2</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person3">
    <p>Person 3</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content person4">
    <p>Person 4</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>

CSS

.content{
    display:none;
}

img:nth-of-type(1):hover ~ .person1{
    display: block;
}

img:nth-of-type(2):hover ~ .person2{
    display: block;
}

img:nth-of-type(3):hover ~ .person3{
    display: block;
}

img:nth-of-type(4):hover ~ .person4{
    display: block;
}

CSS EXAMPLE

或

如果您真的想用 jQuery 做到这一点，有几种方法可以做到。这是一个:

JS

$("img").hover(function(){
   var grabClass = $(this).attr("class");
   $(".person-"+grabClass).toggle();   
});

HTML

<img class="one" src="http://www.placecage.com/100/100"/>
<img class="two" src="http://www.placecage.com/100/100"/>
<img class="three" src="http://www.placecage.com/100/100"/>
<img class="four" src="http://www.placecage.com/100/100"/>
<div class="content person-one">
    <p>Person 1</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person-two">
    <p>Person 2</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person-three">
    <p>Person 3</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content person-four">
    <p>Person 4</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>

JQUERY EXAMPLE