纯CSS悬停会导致文本出现颜色重叠

Question

This is my first post on Stack Overflow, but I've been finding answers on here for years. 这是我关于Stack Overflow的第一篇文章，但是多年来我一直在这里找到答案。 This is one I can't seem to find though. 这是我似乎找不到的一个。

I'm wondering if there is a way to do the following using only HTML and CSS. 我想知道是否有一种方法可以仅使用HTML和CSS进行以下操作。

I have a fluid layout, and I want to keep the images fluid. 我的布局很流畅，我想保持图像流畅。 I currently have each image set up to fill their respective divs by using the max-height:100% and max-width:100% properties. 我目前通过使用max-height：100％和max-width：100％属性来设置每个图像来填充各自的div。

On hover, I would like the image to have a slightly transparent color overlay, and reveal some text and a button. 悬停时，我希望图像具有稍微透明的颜色覆盖，并显示一些文本和按钮。

I'm able to do this if I define the image/div width, but I cannot figure out how to do it while keeping the image so it re-sizes dynamically. 如果定义图像/ div宽度，我可以执行此操作，但是我无法弄清楚在保留图像的同时如何动态调整其大小。

Here's a Fiddle of 4 images in a fluid layout. 这是流畅布局中的4张图像的小提琴。 Any help would be GREATLY appreciated, I feel like I'm overlooking something. 任何帮助将不胜感激，我觉得我在忽略一些东西。

And the code: 和代码：

HTML

<body>
    <div id="container">
        <div class="span4 red">
            <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
        </div>
        <div class="span4 blue">
            <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
        </div>
        <div class="span4 green">
            <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
        </div>
        <div class="span4 purple">
            <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
        </div>
    </div>
</body>

CSS

body { margin:0;}
#container { width:100%; font-size:0;}
img { max-width:100%; max-height:100%;}
.span4 { width:25%; display:block;}
.red { background-color: red; float:left; overflow:hidden;}
.blue { background-color: blue; float:left; overflow:hidden;}
.green { background-color: green; float:left; overflow:hidden;}
.purple { background-color: purple; float:left; overflow:hidden;}

Answer 1

DEMO 演示

html html

<div class="span4 red">
    <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
    <div class="overlay">
        <span>Text text text</span>
        <button>Button</button>
    </div>
</div>

css 的CSS

.span4 {
    width:25%;
    display:block;
    position:relative; /*added*/
}

/*added*/
.overlay {
    position:absolute;
    top:0;
    width:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.3);
    display:none;
}
.red:hover .overlay {
    display:block;
}

Answer 2

Try using the :after pseudo selector ( note browser compatability ) 尝试使用:after伪选择器（注意浏览器兼容性）

http://jsfiddle.net/HGWPZ/1/ http://jsfiddle.net/HGWPZ/1/

.span4 {
    width:25%;
    display:block;
    position: relative;
}

.span4:hover:after
{
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

.red:hover:after
{
    background: RGBA(255, 0, 0, .3);
}

.blue:hover:after
{
    background: RGBA(0, 0, 255, .3);
}

.green:hover:after
{
    background: RGBA(0, 255, 0, .3);
}

.purple:hover:after
{
    background: RGBA(230, 230, 250, .3);
}

idk what the RGB value for purple is though :p so play around with it idk紫色的RGB值是什么：p，所以玩一下

纯CSS悬停会导致文本出现颜色重叠

问题描述

2 个解决方案

解决方案1
5 已采纳 2014-01-14 20:04:24

解决方案2
4 2014-01-14 19:55:52

纯CSS悬停会导致文本出现颜色重叠

问题描述

2 个解决方案

解决方案1 5 已采纳 2014-01-14 20:04:24

解决方案2 4 2014-01-14 19:55:52

解决方案1
5 已采纳 2014-01-14 20:04:24

解决方案2
4 2014-01-14 19:55:52