Question

我想在图像上创建悬停效果，当悬停在多个彩色div上时会出现。我想我可以用CSS做到这一点，但我无法得到我想要的结果。

我的目标是最终看起来像： enter image description here

HTML：

<div class="row thumbrow">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-4 thumbgrid">
    <li>
        <div class="thumb">
                {{ cms:page_file:thumb_one.image:image}}
                <span class="center">{{ cms:page:thumb_one.text:string }}</span>
            <div class="yellow">                    
            </div>
        </div>
    </li>
</ul>
</div>

CSS：

.thumb {
    display:inline-block;
    position: relative;
    height: 170px;
    overflow: hidden;
}
.thumb:after {
    background: rgba(255,255,255,.8); 
    content:'';
    display: block;
    height: 170px;
    left: 0;
    opacity: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.thumb:hover:after {
    opacity: 1;
    padding: 20px;
    transition: opacity .4s;
}

.thumb:hover .yellow {
    content:'';
    display: block;
    height: 170px;
    left: 0;
    opacity: 1;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 5;
    background: #f9d33a;
}  

span.center {
    color: white;
    position: relative;
    top: -100px;
    z-index: 3;
}

Answer 1

作为评论，关键部分是缺少css position:absolute元素.yellow和.center

我已经开始演示 here

选择器:after的使用不是必需的，在演示中CSS缩短为：

.thumb {
    display:inline-block;
    position: relative;
    height: 170px; width:100%;
    overflow: hidden; 
}
.thumb .yellow, .thumb .center { display:none; }
.thumb:hover .yellow {
    content:'.'; display: block;
    position: absolute; z-index: 1;
    bottom:10px; left: 10px; right:10px; top: 10px;
    background: #f9d33a; opacity: 0.5;
}  
.thumb:hover .center {
    display:block; color: white;
    position: absolute; z-index: 2;
    top: 20px; left: 20px; right: 20px; bottom:20px;
}

一些值（如我编造的顶部，底部，左侧，右侧偏移），关键部分是position:absolute

Answer 2

您可以使用悬停选择器和兄弟选择器在悬停时显示，类似于suckerfish菜单：

http://jsbin.com/qerucawe/3

http://jsbin.com/qerucawe/3/edit

悬停时带有多个颜色叠加的Div

2 个答案: