html - 父级悬停时子级的不兼容 css 更改

Question

我有以下 html 代码:

.logo {
  display: inline-block;
  width: 30px;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}

<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="logo.png" alt="" class="logo">
  <img src="picture.jpg" alt="" class="picture">
</div>

当 .container 悬停时，我希望 .logo 处于不透明度:1 和 .picture 处于过滤器:亮度(0.7)。

当尝试在 .container 悬停时逐个应用这些属性时，每个属性都有效。但是当两者都设置好后，只有过滤器一个在工作。

Answer 1

如果您将位置设置为relative 而不是absolute，那么两个图像都会显示。随着代码的出现，一张图片丢失了。 (我替换了我自己的图片，并添加了一个图片类来调整图片的大小)

虽然转换工作正常!

尝试以下:

.logo {
  display: inline-block;
  width: 100px;
  //height:auto;
  position: relative;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.picture {
  width: 500px;
  height: auto;
  float: left;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}

<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
  <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>

Fiddle here