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;
}

Demo

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