jquery - div的深色透明 mask

Question

当有人将鼠标悬停在产品图片上时，我试图在产品 div 上应用深色透明 mask 。我之前为整个屏幕创建了 mask 。这次我也使用了相同的逻辑，但它的行为真的很奇怪。我尝试使用 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();
  });
});

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

Answer 1

我也刚刚使用了 CSS。这是我的 JSFiddle - http://jsfiddle.net/4UNuB/

HTML

<div id="box1"> 

<a href=""><div id="black-box">
    <h2>View Details</h2>
</div></a>

CSS

    #box1 {
    border: #999 2px solid;
    width: 180px;
    height: 250px;
    background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
    background-position: center;
    background-repeat: no-repeat;
}
#black-box {
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(00,00,00,0.8);
    width: 100%;
    height: 100%;
    opacity: 0.0;
}

#black-box:hover {
    opacity: 1.0;
}

h2 {
    padding-top: 110px;
}

祝你好运!