jquery悬停效果在所有div中都不起作用

Question

当我们悬停时,我正试图在图像前面添加一些文字.但它只在第一个div工作.当我悬停剩余的div时它不起作用.如果我想在所有div中工作,我该怎么办？

的jsfiddle

jQuery的

$("#image").hover(function () {

    $("#imgtext").slideToggle(250, function () {
        $("#showme").slideToggle(250);
    });
}, function () {

    $("#showme").slideToggle(250, function () {
        $("#imgtext").slideToggle(250);
    });
});

HTML

<div id="image">
    <img src="first.jpg" width="260" height="160"/>
    <div id="imgtext"> Description of above image </div>
    <div id="showme"> Show me </div>
</div><br>
<div id="image">
    <img src="first.jpg" width="260" height="160"/>
    <div id="imgtext"> Description of above image </div>
    <div id="showme"> Show me </div>
</div><br>
<div id="image">
    <img src="first.jpg" width="260" height="160"/>
    <div id="imgtext"> Description of above image </div>
    <div id="showme"> Show me </div>
</div><br>

CSS

    #image
    {
        position: relative;
    }
    #imgtext
    {
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,0.2);
        width: 260px;
        height: 30px;
    }
    #showme
    {
        width: 260px;
        height: 160px;
        display: none;
        position: absolute;
        background: rgba(0,0,0,0.2);
        top: 0;
        color: #FFFFFF;
    }

Answer 1

更改id="image"为class="image" ID必须是唯一的

HTML

<div class="image">
    <img src="first.jpg" width="260" height="160"/>
    <div class="imgtext"> Description of above image </div>
    <div class="showme"> Show me </div>
</div><br>
<div class="image">
    <img src="first.jpg" width="260" height="160"/>
    <div class="imgtext"> Description of above image </div>
    <div class="showme"> Show me </div>
</div><br>
<div class="image">
    <img src="first.jpg" width="260" height="160"/>
    <div class="imgtext"> Description of above image </div>
    <div class="showme"> Show me </div>
</div><br>

jQuery的

$(".image").hover(function () {
    $that = $(this);
    $that.find(".imgtext").slideToggle(250, function () {
        $that.find(".showme").slideToggle(250);
    });
}, function () {
    $that = $(this);
    $that.find(".showme").slideToggle(250, function () {
        $that.find(".imgtext").slideToggle(250);
    });
});

CSS

.image{
position: relative;
}
.imgtext{
    position: absolute;bottom: 0;
    background: rgba(0,0,0,0.2);
    width: 260px;height: 30px;
}
.showme{
    width: 260px;height: 160px;display: none;
    position: absolute;background: rgba(0,0,0,0.2);
    top: 0;color: #FFFFFF;
}

演示

如果你想创建一个accordian然后你可以尝试jquery-ui-autocomplete或css-trick-autocomplete