Jquery 悬停标题

Question

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

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

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

注意：即使您不更改 Ids .. 但 Id ，上面的 js 代码也可能会起作用 必须是唯一的

Working Demo