Question

我正在创建一个图库，并希望在用户将鼠标悬停在图像上时为我的图像添加白色色调。我已设法在悬停时添加.view-me div，但我无法弄清楚如何删除它。我试过.remove()没有成功 - 有什么想法吗？

JS

$(document).ready(function() {
    $('.photo-block').hover(function() {
        $(this).append("<div class='view-me' id='view-me'></div>");
        $(this).find("#view-me:last").remove();
    });
});

HTML

 <div class="grid">
     <div class="photo-block"></div>
     <div class="photo-block"></div>
     <div class="photo-block"></div>
     <div class="photo-block"></div>
     <div class="photo-block"></div>
 </div>

JSFiddle

Answer 1

快速修复：

$(document).ready(function() {
    $('.photo-block').hover(function() {
        $('#view-me').remove();
        $(this).append("<div class='view-me' id='view-me'></div>");
    });
});

Answer 2

使用css： Demo

HTML：

<div class="photo-block">
     <div class="overlay"></div>
     <img src="http://placekitten.com/400/400">
 </div>

的CSS：

.photo-block {
    position: relative;
}

 .overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     right: 0;
     left: 0;
     top: 0;
     bottom: 0;
     background: rgba(255,255,255, 0.5);
     display: none;
 }

 .photo-block:hover .overlay {
     display: block;
 }

Answer 3

我已将jQuery脚本修改为：

$(document).ready(function () {
    $('.photo-block').hover(function () {
        $(this).append("<div class='view-me' id='view-me'></div>");
    }, function () {
        $(this).find("#view-me:last").remove();
    });
});

您正在添加然后删除同一事件中的div。我已将其修改为在悬停处添加div ，并在悬停时将其删除

您可以查看your JSFiddle示例以及我对其进行了修改。

Answer 4

你走了：

http://jsfiddle.net/gmcPW/4/

$(document).ready(function() {
   $('.photo-block').hover(function() {
    $( this ).append( $( "<div class='view-me'></div>" ) );
    }, function() {
         $( this ).find( ".view-me:last" ).remove();
    }
  );

});

Answer 5

CSS版本根据我的评论。

HTML：

<div class="grid">
    <div class="photo-block">
        <img src="xyz.jpg">
    </div>
</div>

CSS：

.grid{
    background-color:#f00;
}
.photo-block{
    background-color:#fff;
}
.photo-block img:hover{
    opacity:0.4;
}

在悬停时添加和删除div

5 个答案: