jquery - 用于div的深色透明 mask

当有人在产品图片上徘徊时，我正在尝试在产品div上应用深色透明蒙版。我之前为整个屏幕创建了蒙版。这次我也使用了相同的逻辑，但是它的行为确实很奇怪。我尝试使用mouseenter，mouseleave，但是它不起作用。即使我的鼠标指针没有离开图像，遮罩也会一直出现然后消失。下面是它的外观：而且，当我已经将jquery中的box1作为目标时，我不知道为什么蒙版会以整个屏幕为目标。

JSfiddle

的HTML

<div id="box1">
<img src="http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png" alt="orange" title="orange" />
<a href="#">View Detail</a>
</div>

的CSS

div#box1 {
  border: #999 2px solid;
  width: 180px;
  height: 250px;
}

div#box1 > img {
  position: absolute;
  z-index: 2000;
  max-height: 240px;
}

div#box1 >a {
  display: none;
  position: absolute;
  top:100px;
  left: 40px;
  margin: 10px 0 0 10px;
  z-index:3000;
  background: white;
  text-decoration: none;
}

div#box1:hover a {
  display:block;
}

#mask {
  display:none;
  background: #000;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 2500;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

jQuery查询

$('#box1 img').mouseenter(function () {
    $('#box1').append('<div id="mask"></div>');
    $('#mask').fadeIn(400);
});

$('#box1 img').mouseleave(function () {
  $('#mask').fadeOut(400, function () {
    $('#mask').remove();
  });
});

如果您知道我在做什么错，非常感谢您的帮助。谢谢。

最佳答案

根据我的评论，使用伪元素而不使用jQuery DEMO：

div#box1 {
  border: #999 2px solid;
  width: 180px;
  height: 250px;
  position:relative;
  text-align:center;
}
div#box1 > img {
  position: relative;
  z-index: 1;
  max-height: 240px;
}
div#box1 >a {
  display: none;
  position: absolute;
  top:100px;
  left: 40px;
  margin: 10px 0 0 10px;
  z-index:3;
  background: white;
  text-decoration: none;
}
div#box1:hover a {
  display:block;
}
div#box1:before{
  content:'';
  background: #000;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition:0.4s;
  opacity:0;
}
div#box1:hover:before{
  opacity:0.75;
}