Question

我试图在鼠标悬停在图像上时覆盖图像的覆盖（彩色背景）。到目前为止，我有：

<div class='wrap'>
<img class='tilesetsmall' src ='images/sample.jpg'>
<p class='example-text'>Overlay Test text </p>
<div class='ontop'></div>
</div>
<div class='wrap'>
<img class='tilesetsmall' src ='images/sample.jpg'>
<p class='example-text'>Overlay Test text </p>
<div class = 'ontop'></div>     
</div>

的CSS：

.wrap{
  position: relative; 
  width:500px;
  height:500px; 
  display:inline-block;
  float:left;    
}

.ontop{
    background-color: rgba(50,50,50,1);
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    display:none;

}
.tilesetsmall{
  width:100%;
  height:100%;
  display:inline-block;
  float:left;
  position: relative;

}

我到目前为止的jquery代码是：

$('.wrap').on('mouseenter','.ontop',function(){
    $(this).find('.ontop').fadein(200);
})
.on('mouseleave','.ontop',function(){
    $(this).find('.ontop').stop().fadeOut(200);
})

我不知道哪里出错了所以我可能包含了超出必要的信息。叠加文字不是我遇到困难的部分（只是简单地将文字放在图像的顶部）。

Answer 1

你实际上并不需要Js

JSfiddle Demo

<强> CSS

.wrap{
  position: relative; 
  width:500px;
  height:500px; 
  display:inline-block;
  float:left;    
}

.ontop{
    background-color: rgba(50,50,50,1);
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity:0;
    transition:opacity 0.5s ease;
}

.wrap:hover .ontop {
    opacity:1;
}
.tilesetsmall{
  width:100%;
  height:100%;
  display:inline-block;
  float:left;
  position: relative;

}

但是，如果您需要JQ解决方案

<强> JQuery的

$(document).ready(function() {
  $('.wrap').mouseenter(function() {
      $(this).find('.ontop').fadeIn(200);

  });
      $('.wrap').mouseleave(function() {
      $(this).find('.ontop').fadeOut(200);

  });
});

JSfiddle Demo 2

Answer 2

您的<p>代码需要在<div class="onTop>内。同样在您的js中，它应该是fadeIn以下jsFiddle您的代码。

Answer 3

使用 .bind 代替 .on //绑定附加事件处理程序
将 fadein 替换为 fadeIn //我是fadein的首都

这里是jsfiddle http://jsfiddle.net/4Pk8p/3/ 这是固定代码：

$('.wrap').bind('mouseenter','.ontop',function(){
    $(this).find('.ontop').fadeIn(200);
})
.bind('mouseleave','.ontop',function(){
    $(this).find('.ontop').stop().fadeOut(200);
})

在鼠标悬停时为图像创建叠加层

3 个答案: