Question

我在CSS中使用flex来创建缩略图网格。这个网格看起来很好，并按我的要求显示。我已经尝试向图像部分添加悬停效果，触发CSS悬停事件并更改隐藏的div的不透明度。

奇怪的是，如果我在一行中有10个弹性框，则悬停事件会在每个单独的弹性项目上正确触发。但是，只要flex项包装到下一行，悬停事件就无法正常工作，并将事件应用于随机元素。

我已经在JSFiddle发布了代码，它不包含图片或图标，但效果仍然相同。 https://jsfiddle.net/nathanrhys/vf5z53sc/

为了完整性，这里是<li> html（显然现实生活中有多个项目）

<ul class="flex-container">
<li class="flex-item">
      <div class="thumbnail-container">
            <div class="roll">
                 <i class="captionicons fa fa-expand fa-4x" aria-hidden="true"></i>
            </div>
            <div class="image-container">
                <img class="image-item" src="Images/IMAGE (474).JPG" />
            </div>

            <div class="thumbnail-title">DSC_00233.jpg</div>
            <div class="thumbnail-icons">
            <section>
                 <div class="thumbleft"><i class="fa fa-eye fa-lg" aria-hidden="true"></i>&nbsp&nbsp <b>620</b></div>
                 <div class="thumbright"><i class="fa fa-folder fa-lg" aria-hidden="true"></i></div>
            </section>
            </div>
      </div></li></ul>

这些项目的CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
}

.flex-item {
    width: 200px;
    height: 230px;
    margin: 10px;
    border: 1px solid #e2e2e2;
    color: white;
    background: #ffffff;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    height: 160px;
}

.image-item {
    max-width: calc(200px - 3px);
    max-height: calc(160px - 3px);
}

 .roll:hover  {
    opacity: 0.6;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;

}

.roll {
    position: absolute;
    width:200px;
    height: 166px;
    top:19px;
    background: #000;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

我是新手，所以请帮助我找到我的错误，我已经尝试将悬停移动到最顶级的div flex项目，但这仍然会导致同样的问题。

Answer 1

我试过这个并且它有效。而不是具有初始不透明度为0的类卷的div，然后在悬停时更改为0.6，您可以在图像容器上放置黑色背景。然后，当您将鼠标悬停在图像上时，可以降低其不透明度，您将获得基本相同的效果。将其添加到您的CSS：

.image-item:hover {
  opacity: 0.4;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

看看这个updated fiddle

Answer 2

感谢Denis，我意识到我没有在.image-container中设置相对位置。添加

position: relative;
overflow: hidden;

到.image-container悬停按预期工作。

我在JSFiddle更新了这个，https://jsfiddle.net/nathanrhys/a7tbgwzr/

悬停html元素时奇怪的css悬停效果

2 个答案: