Question

尝试将叠加添加到绝对定位图像。下面的代码工作但不完美。

已经尝试过使用z-index属性，但没有运气。

下面是Codepen上代码的工作示例。

HTML

<div class="test">
  <img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive">
  <i class="fa fa-plus"></i>
  <h2>Lorem Ipsum</h2>                                  
  <p>text</p>
</div>

CSS

.test {
    position: relative;
    padding-left: 97px;
    margin-bottom: 42px;
    padding-top: 18px;
}
.test img {
    position: absolute;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    max-width: 80px;
    cursor: pointer;
}
.test img:hover + i {
    opacity: .7;
    top: 7px;
}
.test i {
    background: #ccc none repeat scroll 0 0;
    color: #ffffff;
    font-size: 20px;
    top: -50%;
    left: 3px;
    line-height: 68px;
    position: absolute;
    text-align: center;
    width: 74px;
    height: 74px;
    transition: .3s;
    opacity: 0;
}
.test h2 {
  margin-top: 0;
  margin-bottom: 0;
}

Answer 1

只需将pointer-events: none添加到您的.test i规则中，它就会表现出来（悬停时不闪烁）

要使其与img的位置/尺寸相匹配，请使用相同的位置/尺寸值

＆＃13;

.test {
    position: relative;
    padding-left: 97px;
    margin-bottom: 42px;
    padding-top: 18px;
}
.test img {
    position: absolute;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    width: 80px;
    cursor: pointer;
}
.test img:hover + i {
    opacity: .7;
    top: 6%;
}
.test i {
    background: #ccc none repeat scroll 0 0;
    color: #ffffff;
    font-size: 20px;
    top: -50%;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    width: 80px;
    height: 80px;  
    line-height: 68px;
    position: absolute;
    text-align: center;
    transition: .3s;
    opacity: 0;
    pointer-events: none;
}
.test h2 {
  margin-top: 0;
  margin-bottom: 0;
}

＆＃13;

<div class="test">
  <img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive">
  <i class="fa fa-plus"></i>
  <h2>Lorem Ipsum</h2>                                  
  <p>text</p>
</div>

＆＃13;

根据评论添加了2：nd示例

＆＃13;

.test {
    position: relative;
    padding-left: 97px;
    margin-bottom: 42px;
    padding-top: 18px;
}
.test a {
    position: absolute;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    width: 80px;
    cursor: pointer;
}
.test a:hover + i {
    opacity: .7;
    top: 6%;
}
.test i {
    background: #ccc none repeat scroll 0 0;
    color: #ffffff;
    font-size: 20px;
    top: -50%;
    left: 0;
    top: 6%;
    border: 3px solid #FFF;
    width: 80px;
    height: 80px;  
    line-height: 68px;
    position: absolute;
    text-align: center;
    transition: .3s;
    opacity: 0;
    pointer-events: none;
}
.test h2 {
  margin-top: 0;
  margin-bottom: 0;
}

＆＃13;

<div class="test">
  <a href="#"><img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive"></a>
  <i class="fa fa-plus"></i>
  <h2>Lorem Ipsum</h2>                                  
  <p>text</p>
</div>

＆＃13;

如何将叠加添加到绝对定位元素？

1 个答案: