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

第1页：正如我所说，不要复制你的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 必须是独一无二的

Working Demo

Answer 2

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

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

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

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

Jquery悬停标题

2 个答案: