Question

当有人在产品图片上盘旋时，我正试图在产品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();
  });
});

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

Answer 1

我没有使用任何jquery但是只使用了css元素来实现我认为你想要的效果......这里是小提琴...... http://jsfiddle.net/5Vw8b/2/希望这是你想要的。

我补充说..

div#box1:hover > #mask{
display:block;

在css和html部分我添加..

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

Answer 2

我也只是使用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;
}

祝你好运！

Answer 3

从我的评论中，使用伪元素而不是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;
}

div的深色透明面具

3 个答案: