jQuery 图片悬停效果

Question

我想在图像上使用 jQuery 获得简单的悬停效果。我最终想要得到的是一种绿色的悬停效果，文字随颜色一起出现。不知道我说的对不对

现在，我只想让简单的颜色悬停效果起作用。

这是我首先做的：

$("img").hover(
    function() {
        wid = $(this).width();
        hei = $(this).height();
        $("<div id='hover'></div>").insertBefore(this);
        $("#hover").css({
            "background-color": "rgba(60,147,138,0.2)",
            "width": wid,
            "height": hei,
            "z-index": "3",
            "position": "absolute"
        });
   },
   function() {
       $("#hover").remove();
   }
);

那里的代码在我的图像顶部生成一个空的 div，具有透明的绿色背景，以获得绿色悬停效果。但效果不是很好，我的猜测是鼠标不再在图像上，而是在图像正上方出现的 div 上。

所以我当时尝试了这个：

$("img").mouseenter(
    function() {
        wid = $(this).width();
        hei = $(this).height();
        $("<div id='hover'></div>").insertBefore(this);
        $("#hover").css({
            "background-color": "rgba(60,147,138,0.2)",
            "width": wid,
            "height": hei,
            "z-index": "3",
            "position": "absolute"
        });
    }
);

$("#hover").mouseleave(
    function() {
        $(this).remove();
    }
);

悬停效果如我所料稳定，但是mouseleave事件就是不起作用。我不知道该怎么办。

如有任何帮助，我们将不胜感激！

编辑：哦，这是 the JSFiddle，以防万一

Answer 1

先说个小题外话...
你想做的事情可以很容易地完成 仅使用 CSS 和 :hover 伪

.imgWrapper,
.imgWrapper img{
  position:relative;
  display:inline-block;
  vertical-align:top;
}
.imgWrapper span{
  position:absolute;
  z-index:1;
  top:0; bottom:0; left:0; right:0;
  background:rgba(60,147,138,0.2);
  padding:24px;
  text-align:center;
  color:#fff;
  opacity:0;
  transition: 0.3s;
  font-size:2em;
}
.imgWrapper:hover span{
  opacity:1;
}

<span class="imgWrapper">
  <img src="http://lemagcinema.fr/wp/wp-content/uploads/2014/11/alain_delon_59055-1024x768-500x372.jpg" width="300">
  <span>This is an<br>image caption!</span>
</span>

回答您的jQuery问题

$("#hover").mouseleave(

在您分配该功能时，页面上没有 #hover 元素。

这样做就可以了：

$("img").mouseenter(function() {

  var wid = $(this).width();
  var hei = $(this).height();

  $("<div id='hover' />").insertBefore(this);

  $("#hover").css({
    "background-color": "rgba(60,147,138,0.2)",
    "width": wid,
    "height": hei,
    "z-index": "3",
    "position": "absolute"
  }).mouseleave(function() {
    $(this).remove();
  });

});

甚至更好，您根本不需要#ID：https://jsfiddle.net/q5r3a00x/5/

$("img").mouseenter(function() {

  var wid = $(this).width();
  var hei = $(this).height();

  $("<div />", {
    insertBefore : this,
    mouseout : function(){
      $(this).remove();
    },
    css : {
      backgroundColor: "rgba(60,147,138,0.2)",
      width: wid,
      height: hei,
      position: "absolute"
    }
  });

});

jQuery 图片悬停效果

jQuery hover effect on image

javascript

jquery

hover

回答您的jQuery问题