兄弟元素继承不透明度

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>

兄弟元素继承不透明度

Sibling element inheriting opacity

html

css

jquery

opacity