悬停不透明度

Question

HTML

 <div class="col-md-3"> 
      <img src="img/thumnail1.jpg" class="thumbnail"> 
      <div class="thumbnail-area fa fa-search-plus"></div> 
     </div> 

CSS

.thumbnail:hover{ 
    background-color: #6bb533; 
    border: 1px solid #6bb533; 
} 
.thumbnail:hover .thumbnail-area{ 
    opacity:1; 
} 
.thumbnail-area{ 
    background: #6bb533; 
    position: absolute; 
    display: inline-block; 
    padding: 10px; 
    bottom: 20px; 
    right: -1px; 
    font-size: 21px; 
    color: #fff; 
    opacity:0; 
} 

我需要做的.thumbnail-area不透明度为1徘徊在.thumbnail时正常工作。但它似乎不工作。请帮帮我。

Answer 1

你.thumbnail-area不是嵌套.thumbnail下，它毗邻的是，所以你需要

.thumbnail:hover + .thumbnail-area{ 
    opacity:1; 
} 

Demo

Demo 2（只限定使用position: relative;容器absolute定位元素）

Demo 3（Add编一个真正的预览图像）

---

另外，如果你在最后的演示中看到，即演示3，opacity不舒服，你可以使用display: none;和:hover使其display: block;因为反正你是不褪色 的元素，或过渡，所以你将不需要0​​