继承不透明度的兄弟元素答案

【问题标题】：Sibling element inheriting opacity继承不透明度的兄弟元素
【发布时间】：2018-08-16 19:57:57
【问题描述】：

我有以下问题 - 每当我点击照片时，我希望它变成 .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');
})

【问题讨论】：

可能是错觉？
不，不是。当我应用 opacity: 1 in css 时，它是完全可见的
你能创建一个完整的 sn-p ...我怀疑一些错误的 CSS .. 你还可以将你的逻辑应用到任何 div 点击
css 中没有其他内容了。我在这里唯一没有包括的是照片是用 javascript 生成的，没有别的
所以你所有的图标都是绝对位置？在这种情况下，如果你拥有的所有 CSS 都应该重叠

标签： jquery html css opacity

【解决方案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>

【讨论】：

没错……它现在可以工作了。但这真的是狗，这些是兄弟元素，它们应该不会相互影响
@DavidC。其他元素应该有更多的 CSS :) 只有这个 CSS 不可能有这种行为......图标位于顶部/右侧，图像为 200px 宽，因此对于普通屏幕，无法使用图标只用你显示的 CSS 重叠图像......所以不要告诉我在你的页面上你只有这个 CSS，我不会相信你 ;)