代码之家 › 专栏 › 技术社区 › dimitrilpc

CSS,悬停一个元素,通过转换[复制]影响另一个元素

css-transitions css html

dimitrilpc · 技术社区 · 8 年前

我的CSS有问题,我不明白为什么我不能为覆盖元素(.afterDim)创建转换。我的叠加正在工作,但是我找不到如何在这两个状态之间进行转换。我试着玩我的课程,但似乎没有任何效果,我有点迷路了,我需要你的帮助。

    .dimImgContainer .afterDim {
      position: absolute;
      top: 0;
      left:10px;
      width:calc(100% - 20px); 
      height: 100%;
      display: none;
      color: #FFF;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; 
    }

    .dimImgContainer:hover > .afterDim {
      display: block;
      background: rgba(0, 0, 0, .6);
    }

<div class="hidden-xs col-sm-4 col-md-4 iqitcontent-column iqitcontent-element iqitcontent-element-id-12  banner-column ">
      <a href="https://biospera.com/graines-potageres/"><div class="dimImgContainer">
        <div class="afterDim">Hello there</div>
        <img src="https://biospera.com/img/cms/Homepage/hp-banners/pct/graines-potageres-banner-pct-2.jpg" class="img-responsive banner-image" alt="Grievous">
        <h2 class="headingDevDimPCT">General Kenobi</h2>
      </div></a>
    </div>

我还制作了一个代码笔,代码与这里的代码完全相同:

https://codepen.io/dimitrilpc/pen/oEEQoG

1 回复 | 直到 8 年前

Alexus 8 年前

陈列属性处于打开或关闭状态,不能与转换一起使用。相反,请使用可以具有以下值范围的属性 不透明度 .

.image-container .afterDim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* CHANGE DISPLAY to OPACITY */
    color: #FFF;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; 
}
.image-container:hover .afterDim {
    opacity: 1; /* CHANGE DISPLAY to OPACITY */
    background: rgba(0, 0, 0, .6);
}

推荐文章

Luckkks · 过渡色工作不正常

1 年前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

2 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

2 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

3 年前

Ancross · 为什么我的小CSS动画不会触发?

4 年前

Jorge · :before和:after伪元素以接收过渡效果

8 年前

Arsalan Khattak · 线性渐变过渡

8 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

8 年前

Paul · 悬停时变换比例不缩放

8 年前

Willem van der Veen · CSS转换结合JS clickEvent

8 年前