Question

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

我已经尝试过只在鼠标悬停在图像上时显示它，使用.mouseenter和FadeIn而不是fadeToggle，但是有一个错误会让它在图像上每秒悬停一次。< / p>

我的代码（包含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包装到自己的包装.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中，这样您就可以保留由引导程序类.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 1}}的{{1}}为0。

触发JQuery

当您将鼠标悬停在图片上时，jquery会触发并向.isOpened添加一个.infopop，.isOpened会将.infopop css z-index更改为3现在.infopop已超过img并且会将.bottom-block opacity更改为1. JQuery还会在mouseleave上绑定.infopop个事件，但是.infopop会显示，您的光标已经在其上方，因此唯一可能触发的事件是mouseleave事件，该事件旨在删除.isOpened类并将内容更改为正常。

Answer 2

尝试使用此代码而不是上述代码：

  $(document).ready(function() {
      $(".campview img").hover(function(){
                  $(this).siblings('.infopop').css('display', 'block');
         }, function() {
                  $(this).siblings('.infopop').css('display', 'none');
        });
    });

Answer 3

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }

Answer 4

对于将来需要此功能的所有人，我都会分享我的解决方案。我认为这是最简单的。我只是选择＆＃34; .col＆＃34;包含img的唯一元素将是fadeOut＆＃34; .infopop＆＃34;。

<强> Jquery的

$(document).ready(function() {
  $(".infopop").hide();
  $(".campview img").mouseenter(function(event){
  $(this).next().fadeIn();
  });
  $(".campview div.col-xs-12.col-sm-3").mouseleave(function(event){
    $(".infopop").fadeOut();
  });

});

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

4 个答案: