Jquery 悬停字幕

Question

我的 html 代码中有几个 div。 position 1

当我悬停时，这个 div 的第一个 div 正在悬停，但其他 div 没有悬停。

这是我的 html 代码：

<div class="col-md-3" id="main_discover_img_wrapper">
    <img src="imgs/photo-21086277.jpg" id="main_discover_img"> 
    <div class="col-md-12" id="photo_details_main">
        <h4>Photo author Name</h4>
        <p id="photo_details_p">Flowers in my brain!</p>
    </div>
</div>

<div class="col-md-3" id="main_discover_img_wrapper">
    <img src="imgs/photo-21086277.jpg" id="main_discover_img"> 
    <div class="col-md-12" id="photo_details_main">
        <h4>Photo author Name</h4>
        <p id="photo_details_p">Flowers in my brain!</p>
    </div>
</div>

这是我的CSS：

#main_discover_img_wrapper{
    margin-top: 3px;
    padding: 0;
    height: 200px;
    display: table;
}
#main_discover_img{
    width: 99%;
    margin: 0;
    height: auto;
}
#photo_details_main{
    background-color: green;
    color:black;
    float: left;
    display: table;
    margin-bottom: 0px;
    overflow: inherit;
    position: absolute;
    bottom:0%;
    width: 99.2%;
}
#photo_details_p{
    display: none;
}

这是我的 java 脚本代码：

$("#main_discover_img_wrapper").hover(function(){
    $("#photo_details_p").fadeIn();
}, function(){
    $('#photo_details_p').fadeOut(500);
});

我想要悬停所有 div。不仅是第一。你能帮帮我吗？

Answer 1

1st：正如我所说，不要重复您的 ID，因此您的代码应该是这样的

<div class="col-md-3" id="main_discover_img_wrapper1">
    <img src="imgs/photo-21086277.jpg" id="main_discover_img1"> 
    <div class="col-md-12" id="photo_details_main1">
        <h4>Photo author Name</h4>
        <p id="photo_details_p1">Flowers in my brain!</p>
    </div>
</div>

<div class="col-md-3" id="main_discover_img_wrapper2">
    <img src="imgs/photo-21086277.jpg" id="main_discover_img2"> 
    <div class="col-md-12" id="photo_details_main2">
        <h4>Photo author Name</h4>
        <p id="photo_details_p2">Flowers in my brain!</p>
    </div>
</div>

在 js 中

$("div[class^='col-md-'][id^='main_discover_img_wrapper']").hover(function(){
    $(this).find("p").fadeIn();
}, function(){
    $(this).find("p").fadeOut(500);
});

Note: js code above may work even if you do not change Ids .. but Id must be unique

Working Demo

Answer 2

TL;DR; http://jsfiddle.net/gxm9sb6p/6/

id 在任何编程语言中都应该是一个 unique 标识符。在 HTML 中不要给多个元素相同的 id。每当您发现自己为多个元素提供相同的 id 时，请考虑改用 class。

我已经更改了您的 html/css/javascript，将您的 ID 更改为 classes。新的 javascript 函数在绑定悬停事件之前等待文档（页面的内容）准备就绪，并查找具有 find() 的悬停元素的子元素以应用动画。

$(document).ready(function(){
    $(".main_discover_img_wrapper").hover(function(){
    $(this).find(".photo_details_p").fadeIn();
  }, function(){
      $(this).find(".photo_details_p").fadeOut(500);
  });  
})

Jquery 悬停字幕

Jquery hover caption

html

css

jquery

caption

jquery-hover