javascript - Jquery 选择一个 Div 并触发另一个隐藏的 div

Question

我正在尝试制作一个当鼠标悬停在相关图像上时弹出的信息框。但只是成功地将它弹出并使其闪烁，因为当它弹出时你真的离开了图像......

我已经尝试通过使用 .mouseenter 和 FadeIn 而不是 fadeToggle 仅在鼠标悬停在图像上时显示它，但是有一个错误使得它每隔一秒就会在图像上悬停时弹出。

我的代码(包含 NodeJS - EJS 扩展):

HTML:

 <section class="campview">
        <h1>Most Popular Campgrounds</h1>
          <hr>
           <div class="container-fluid">
               <div class="row">
                  <%  for(var i=0 ; i<4 ; i++){ %>
                    <div class="col-xs-12 col-sm-3">
                        <img src="<%=campgrounds[i].image%>" class="image-responsive img-rounded animated fadeIn">
                           <div class="infopop">
                               <div class="row">
                                  <div class="col-xs-12 col-sm-12">
                                     <h3><%=campgrounds[i].name%> </h3>
                                      </div>
                                  </div>
                             <div class="row">
                                  <div class="col-xs-7 col-sm-7">
                                       <p class="vert-center"><%= campgrounds[i].description.slice(0,100)+"..." %></p>
                                  </div>
                                  <div class="col-xs-5 col-sm-5">
                                     <a href="/campgrounds/<%=campgrounds[i]._id%>" class="btn btn-primary">Read More</a>
                                  </div>
                            </div>
                         </div>
                   </div>
                 <% }; %>

                </div>
              <div class="row">
                  <div class="col-xs-12">
                     <a class="pull-right" href="/campgrounds">View all campgrounds</a>
                  </div>
              </div>
            </div>
   </section>

CSS:

.infopop{
    display: none;
   z-index: 1;
   position: absolute;
   top: 57%;
   width: 92.8%;
   height: 40%;
   background-image: -webkit-gradient(
        linear, left top, left bottom, from(rgba(50,50,50,0)),
        to(rgba(50,50,50,0.8)), color-stop(.3,#000)
     );
}

Jquery:

$(document).ready(function() {
  $(".campview img").hover(function(event){
              $(this).next().fadeToggle("fast");
     });
});

希望你能理解我(:谢谢!

Answer 1

您可能想使用一个类来检查您的下一个元素是否已打开，然后分配一个“mouseleave”事件，这样您就不会再依赖于 $(".campview img")图像打开时。

我附上了一个工作片段。我包裹了你的img和 .infopop进入他们自己的 wrapper .camp-block

$(document).ready(function() {
 
   $(".camp-block img").on("mouseenter", function(event) {
 
     event.stopImmediatePropagation();

     var $myNext = $(this).next();
     if (!$myNext.hasClass("isOpened")) {
       $myNext.addClass("isOpened");

        $myNext.bind("mouseleave", function(ev) {

         $(this).removeClass("isOpened").unbind("mouseleave")

       }); 
     }
   });
 })

.camp-block {
  width: 94%;
  margin: 0 3%;
  position: relative;
}

.camp-block img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.camp-block .infopop {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  padding-top: 50%;
}
.camp-block .infopop.isOpened{
  z-index: 3;
}
.camp-block .infopop.isOpened .bottom-block{
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.camp-block .infopop .bottom-block {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  color: #fff;
  width: 100%;
  display: inline-block;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(50, 50, 50, 0)), to(rgba(50, 50, 50, 0.8)), color-stop(.3, #000));
}


}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section class="campview">
  <h1>Most Popular Campgrounds</h1>
  <hr>
  <div class="container-fluid">
    <div class="row">

      <div class="col-xs-12 col-sm-3">
        <div class="camp-block">
          <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="image-responsive img-rounded animated fadeIn">
          <div class="infopop">
            <div class="bottom-block">
              <h5>custom headline 1</h5>
              <p>
                some text
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-3">
        <div class="camp-block">
          <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="image-responsive img-rounded animated fadeIn">
          <div class="infopop">
            <div class="bottom-block">
              <h5>custom headline 2</h5>
              <p>
                some text
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-3">
        <div class="camp-block">
          <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="image-responsive img-rounded animated fadeIn">
          <div class="infopop">
            <div class="bottom-block">
              <h5>custom headline 3</h5>
              <p>
                some text
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-3">
        <div class="camp-block">
          <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="image-responsive img-rounded animated fadeIn">
          <div class="infopop">
            <div class="bottom-block">
              <h5>custom headline 4</h5>
              <p>
                some text
              </p>
            </div>
          </div>
        </div>
      </div>



    </div>
    <div class="row">
      <div class="col-xs-12">
        <a class="pull-right" href="/campgrounds">View all campgrounds</a>
      </div>
    </div>
  </div>
</section>

更新说明

所以我包装了img和 .infopop进入.camp-block所以你可以保留 Bootstrap 类提供的 block 之间的空间 .col-sm-*添加填充。

然后我添加了position:relative至 .camp-block所以我可以position:absolute img标签。

排序元素

当您第一次进入网站时，元素必须有一个默认位置。你的img必须在 .infopop( z-index:2 ) 之上 ( z-index:1 ) 以便 jQuery 可以触发 mouseenter事件。

请记住 .infopop有padding-top:50%推.bottom-block离顶部更远，那.infopop没有课.isOpened将确保 .bottom-block有一个 opacity共 0 个。

触发 JQuery

当你将鼠标悬停在图像上时，jquery 将触发并添加一个类 .isOpened至 .infopop , .isOpened会变 .infopop CSS z-index现在到 3 .infopop结束了img并将更改 .bottom-block opacity到 1. JQuery 还将绑定(bind)一个 mouseleave事件 .infopop ，但是当.infopop将显示，您的光标已经在其上，因此下一个可能触发的唯一事件是 mouseleave旨在删除 .isOpened 的事件上课并将一切恢复正常。