Jquery Div를 선택하고 숨겨진 다른 div를 트리거합니다.

질문

마우스가 관련 이미지 위에있을 때 튀어 나오는 정보 상자를 만들려고합니다.그러나 그것이 튀어 나오면 문자 그대로 이미지를 떠나기 때문에 그것을 튀어 나와 플래시로 만드는 데 성공했습니다 ...

저는 fadeToggle 대신 .mouseenter 및 FadeIn을 사용하여 마우스가 이미지 위에있을 때만 표시하려고 시도했지만 이미지에 마우스를 올릴 때마다 튀어 나오는 버그가 있습니다.

내 코드 (Node-JS 확장 포함) :

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

당신이 나를 이해하기를 바랍니다 (:감사!

답변1

class를 사용하여 다음 항목이 열렸는지 확인한 다음 "mouseleave"이벤트를 할당하여 이미지가 표시되는 동안 $ ( ". campview img") 에 더 이상 의존하지 않도록 할 수 있습니다. 열었습니다.

작업 snippet을 첨부했습니다. 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>

Expand snippet

설명 업데이트

그래서 img 와 .infopop 을 .camp-block 으로 감싸서 부트스트랩의 class 에서 제공하는 블록 사이의 공백을 유지할 수 있습니다. 패딩을 추가하는 col-sm-* .

그런 다음 position : relative 를 .camp-block 에 추가하여 img태그를 position : absolute할 수 있습니다.

순서 요소

처음 사이트에 들어갈 때 요소는 기본 위치를 가져야합니다.img 가 .infopop (z-index : 1 )보다 맨 위에 있어야 (z-index : 2 ) jQuery가 < code> mouseenter이벤트.

JQuery 실행

이미지 위로 마우스를 가져 가면 jquery가 트리거되고 .isOpenedclass가 .infopop 에 추가되고 .isOpened 는 .infopop이 변경됩니다.css z-index 를 3으로 설정 했으므로 이제 .infopop 이 img위에 있고 .bottom-block <이 변경됩니다. / code> opacity 를 1로 설정합니다. JQuery는 .infopop 에서 mouseleave이벤트도 바인딩하지만 .infopop커서가 이미 위에 있으므로 다음에 트리거 할 수있는 유일한 이벤트는 .isOpenedclass를 제거하고 다시 정상으로 변경하도록 설계된 mouseleave이벤트입니다.

답변2

위의 코드 대신 다음 코드를 시도하십시오.

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

답변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;
      }

답변4

앞으로 이것이 필요한 모든 사람들을 위해 솔루션을 공유하고 있습니다.달성 할 수있는 가장 간단한 메소드가라고 생각합니다.img를 포함하는 ".col"이 ".infopop"을 페이드 아웃하는 유일한 요소가되도록 선택합니다.

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

});

 

 

 

 

출처 : https://stackoverflow.com/questions/47606795/jquery-select-a-div-and-trigger-another-div-that-is-hidden