Question

我有以下问题 - 只要我点击照片，我希望它成为.3 opac和.remove-icon元素可见。并且它按预期工作，但是，图标以某种方式继承图像不透明度。怎么预防？我的代码在下面

HTML

<div id="photos-wrapper">
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
</div>

CSS

#photos-wrapper .remove-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    font-size: 25px;
    color: #ff0000;
    opacity: 0;
}

的jQuery

$(photosContainer).on('click', 'div', function(e) {
 $(this).find('img').animate({opacity: '.3'}, 300);
 $(this).find('.remove-icon').css('opacity', '1');
})

Answer 1

我怀疑您通过透明图片查看了opacity: 1图标。您希望图标显示在上方。你可以通过在图标中添加一个z-index来做到这一点，但是我宁愿重新排序html，以便在以下之后添加图标：

<div id="photos-wrapper">
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
</div>

兄弟元素继承不透明度

1 个答案: