或

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

<强> PREVIOUS：

只要图像及其描述是兄弟姐妹或后代，您就可以使用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

Answer 2

好的，首先

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

    <li>
        <img src="bob.jpg">
         <ul> //Add a ul
             <li>Bob</li> //Change these to li
         </ul>
    </li>

    <li>
        <img src="bob.jpg">
        <ul>
            <li>Bob</li>
        </ul>
    </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>

所以基本上你会为你想要的每一个img和文本做到这一点。使用<p>

将<ul>更改为<li>

然后jquery代码看起来像这样。

$(document).ready(function() {
    $('li').hover(function(){
        $(this).find('ul').stop().fadeToggle(400);
    });
});

如果您希望我解释jquery代码，我很乐意回答它。请记住，html只是将它们更改为列表。如果您不使用任何JavaScript，它们看起来就像列表。

我们可以使用一些css来摆脱列表中的装饰

li {
    list-style-type: none
}

Answer 3

$（document）.ready（function（）{ $（“。figcaption”）。hover（function（）{$（this）.stop（）。animate（{opacity：1}，700，“easeOutQuad”）;}，function（）{$（this）.stop （）.animate（{opacity：0}，700，“easeOutQuad”）;}） }）;

jquery图像悬停效果的描述

3 个答案:

或