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处于filter：brightness（0.7）。

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

Answer 1

如果您将位置设置为relative而不是absolute，则会显示两个图像。正如代码所示，一张图片正在迷失。（我替换了自己的图像，并添加了一个图片类来调整图像大小）

过渡工作正常！

尝试以下：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Fiddle here

父母悬停时子项上的css更改不兼容

1 个答案: