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伪

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

回答你的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悬停对图像的影响

1 个答案:

回答你的jQuery问题