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

【问题标题】：strange css hover effect when hovering html element悬停html元素时奇怪的css悬停效果
【发布时间】：2016-08-18 15:55:54
【问题描述】：

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

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

我已经在 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-item 但这仍然会导致同样的问题。

【问题讨论】：

对不起我的错！ jsfiddle.net/nathanrhys/vf5z53sc
由于你在 .roll 类中设置绝对位置，当图像容器换行到新行时，带有 roll 类的 div 保留在第一行，所以你并没有真正悬停在它上面
你的标记是一团糟，如果你想用更干净的东西替换它，我建议你
@CameronA 你能建议应该改变什么吗？

标签： html css flexbox

【解决方案1】：

我试过了，效果很好。您可以在图像容器上放置黑色背景，而不是具有初始不透明度为 0 的初始不透明度为 0，然后在悬停时更改为 0.6 的 div。然后，当您将鼠标悬停在图像上时，您会降低它的不透明度，您将获得基本相同的效果。将此添加到您的 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

【讨论】：

这很好，唯一的事情是我如何在这个悬停事件中包含一个图标。本质上，当用户将鼠标悬停在图像上时，我想放置 2 个按钮供他们点击？我之前的示例中有一个图标，但没有显示，因为它的字体很棒，谢谢 nathan

【解决方案2】：

感谢 Denis，我意识到我没有将 .image-container 中的位置设置为相对位置。通过添加

position: relative;
overflow: hidden;

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

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

【讨论】：