Question

我已将一些文字放在容器div内的图像顶部，并采用自适应布局。我现在想创建一个＆＃34;翻转＆＃34;效果鼠标悬停在文本上的位置会获得覆盖整个div / image的透明绿色背景颜色。因此图像看起来有点绿。

请参阅http://www.advocatedesign.co.uk/

感谢任何帮助！

Answer 1

请评论这个答案，因为我不确定你想要什么...... 但是你在寻找悬停选择器吗？：http://www.w3schools.com/CSSref/sel_hover.asp

将课程设置为hover并在其中粘贴所需的背景颜色：

P:hover
{ 
background-color:green;
}

Answer 2

您将需要另一个可用作“叠加”图层的div。

JSFiddle Example

（将来，请在您的问题中加入一个JSFiddle和相关代码，因为它可以帮助每个帮助您的人）

HTML

<div class="case_study">
    <div class="overlay"></div>
    <a href="small-woods.html">
        <img src="http://lorempixel.com/400/200/" alt="Small Woods case study">
        <p>Small Woods</p>
    </a>
</div>

CSS：

.case_study{
    position: relative;
    height: 200px;
    width: 400px;
}
.case_study:hover .overlay{
    background-color:green;
    opacity: .3;
    height: 100%;
    width: 100%;
    position: absolute;
}

响应翻转文本在图像上

2 个答案: