Question

根据几个答案的建议，我从使用hover()切换到mouseover()到最后mouseenter()和mouseleave()。然而，我仍然遇到闪烁问题（当悬停.staff_img图像元素时，mouseleave()事件每秒都会持续发射。我做错了什么？

JS

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

Answer 1

这是因为staff_hover div位于图像顶部，触发图像上的鼠标左键，然后div将再次消失并触发鼠标输入等。这就是＆＃39; s为什么它会闪烁。

您可以将z-index添加到staff_hover以使其位于图片下方并避免此问题：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果你想用叠加覆盖图像，你可以简单地使用一些像这样的CSS转换：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您的意图是叠加超出图像（我猜，因为它是叠加？），一种可能的解决方案是获取图像的位置，计算宽度和高度，在鼠标移动时获取鼠标/光标位置，并执行某些操作像这样：

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

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是，我猜你的图像和叠加层具有相同的尺寸，并且两者都放在一个容器内，所以，这是完全不必要的。也许它会帮助某人，无论如何...... :)

Answer 3

只有当您希望在.staff_hover .staff_img之后mouseenter()出现时，您的代码才能正常运行，在这种情况下，只需更改z-index .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:-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>

.staff_hover

如果您希望before .staff_image出现.staff_hover，那么您需要稍微更改jQuery。这会在mouseleave()上隐藏$('.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>

    retirement = Me.DateTimePicker2.Value
    appointment = Me.DateTimePicker1.Value
    Dim workingTime As TimeSpan = retirement - appointment
    Dim yearVal As Double = workingTime.TotalDays / 365
    Dim years = CInt(Math.Floor(yearVal))
    Dim monthVal = (workingTime.TotalDays - years * 365) / 30
    Dim months As Int32 = CInt(Math.Floor(monthVal))
    Dim dayVal = workingTime.TotalDays - (years * 365 + months * 30)
    Dim days As Int32 = CInt(Math.Floor(dayVal))
    Dim result = $" {years} years {months} months & {days} Days"

    tservice.Clear()
    tservice.Text = result

    '   Pay reckonable for pension.
    reckonable = Val(lastpay.Text) + Val(increment.Text)

    '17.    Service on the date of retirement. rounded off
    If months > 5 Then
        totalyear = (Val(years) + 1)

    End If


    '1. PENSION:-17760x26x7/300=Rs. 10774.40
    tpension.Clear()
    pension = (Val(reckonable) * Val(totalyear) * 7 / 300)
    tpension.Text = pension

使用jQuery mouseenter（）和mouseleave（）

3 个答案: