질문

여러 답변의 조언에 따라 hover ()사용에서 mouseover () 로 마지막으로 mouseenter ()및 mouseleave () <로 전환했습니다. / code>. 하지만 여전히 깜박이는 문제가 발생합니다 (.staff_img이미지 요소를 가리키면 mouseleave ()이벤트가 매초마다 계속 발생합니다. 내가 뭘 잘못하고 있는가?)

$('.staff_img').mouseenter(function() {
  $(this).siblings('.staff_hover').fadeIn();
});
$('.staff_img').mouseleave(function() {
  $(this).siblings('.staff_hover').fadeOut();
});

HTML

<img class="staff_img" />
<div class="staff_hover"></div>

CSS

.staff img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.staff_hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
}

답변1

이것은 staff_hoverdiv가 이미지 위에 mouseleave를 트리거하는 이미지 위에 가고 있다는 사실 때문입니다. 그러면 div가 다시 사라지고 mousenter가 트리거됩니다. 이것이 깜박이는 이유입니다.

Z- 색인을 staff_hover 에 추가하여 이미지 아래로 만들고이 문제를 방지 할 수 있습니다.

$('.staff_img').mouseenter(function() {
  $(this).siblings('.staff_hover').fadeIn();
});
$('.staff_img').mouseleave(function() {
  $(this).siblings('.staff_hover').fadeOut();
});

.staff_img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.staff_hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index:-99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="staff_img" src="https://lorempixel.com/200/100/" />
<div class="staff_hover"></div>

Expand snippet

오버레이로 이미지를 덮으려면 다음과 같은 CSS 전환을 사용하면됩니다.

.staff_img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.staff_hover {
  position: relative;
}

.staff_hover:before {
  content:"";
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  transition:1s;
}

.staff_hover:hover::before {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="staff_hover">
  <img class="staff_img" src="https://lorempixel.com/200/100/" />
</div>

Expand snippet

답변2

당신의 의도가 오버레이가 이미지 위에 올라가는 것이라면 (나는 그것이 오버레이이기 때문에?) 가능한 해결책은 이미지의 위치를 얻고, width와 높이를 계산하고, mousemove에서 마우스 / 커서 위치를 가져오고, 다음과 같이하는 것입니다.

    pos=$('.staff_img').position();
    pos_x=pos.left
    pos_y=pos.top

     w=$('.staff_img').width();
     h=$('.staff_img').height();




  $( document ).on( "mousemove", function( event ) {

    if((event.pageX>=pos_x && event.pageX<pos_x+w) && (event.pageY>=pos_y && event.pageY<pos_y+h )) {
    $('.staff_hover').fadeIn();
    }
    else {
    $('.staff_hover').fadeOut();
    }
    });

데모:

pos=$('.staff_img').position();
pos_x=pos.left
pos_y=pos.top

w=$('.staff_img').width();
h=$('.staff_img').height();


$( document ).on( "mousemove", function( event ) {

if((event.pageX>=pos_x && event.pageX<pos_x+w) && (event.pageY>=pos_y && event.pageY<pos_y+h )) {
$('.staff_hover').fadeIn();
}
else {
$('.staff_hover').fadeOut();
}
});

.staff img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.staff_hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="staff_img" src='http://placehold.it/200x200'>
<div class="staff_hover"></div>

Expand snippet

그러나 이미지와 오버레이의 크기가 같고 둘 다 일부 container 내부에 배치되어 있으므로 완전히 필요하지 않습니다. 어쨌든 누군가를 도울 것입니다 ... :)

답변3

코드는 정상적으로 작동합니다. mouseenter () 에서 .staff_img다음에 .staff_hover 를 표시하려는 경우에만 아래 코드에서와 같이 .staff_hover 의> z-index ,

$('.staff_img').mouseenter(function() {
  $(this).siblings('.staff_hover').fadeIn();
});
$('.staff_img').mouseleave(function() {
  $(this).siblings('.staff_hover').fadeOut();
});

.staff img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.staff_hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index:-1; /*Add this*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="staff_img" src="https://lorempixel.com/200/100/"/>
<div class="staff_hover"></div>

Expand snippet

그리고 .staff_hover 가 .staff_image앞에 나타나도록하려면 jQuery를 약간 변경해야합니다. 아래 코드와 같이 mouseleave () 에서 .staff_hover 를 숨 깁니다.

$('.staff_img').mouseenter(function() {
  $(this).siblings('.staff_hover').fadeIn();
});
$('.staff_hover').mouseleave(function() {
  $(this).fadeOut();
});

.staff img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.staff_hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index:9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="staff_img" src="https://lorempixel.com/200/100/"/>
<div class="staff_hover"></div>