Jquery悬停标题

Question

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

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

位置2

这是我的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

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

任何编程语言中的id都应该是唯一的标识符。在HTML中，不要给多个元素提供相同的id。任何时候，如果您发现自己给多个元件提供了相同的id，请考虑使用类。

我已经更改了您的html/css/javascript，将您的id更改为类。新的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);
  });  
})

Answer 2

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

注意：即使不更改Id，上面的js代码也可以工作。。但是Id必须是唯一的

工作演示