悬停颜色使标题不可读答案

【问题标题】：Hover Colour making Headers unreadable悬停颜色使标题不可读
【发布时间】：2014-06-28 23:30:11
【问题描述】：

我正在尝试在这个网站上实现类似http://www.trask-industries.com/#/media 的效果，当内容悬停在它上面时，黄色会消耗它并且标题的颜色会发生变化。当我试图重新创建这种效果时，我的标题变得不可读。 jsfiddle.net/m8Z25

.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
    background-color: white;
    opacity: 0.30;
    transition: .2s;
    webkit-transition: .2s;
   -webkit-transition: all 500ms ease;
}

h1:hover
{
    color: black;
}

h2
{ 
   color: red;
   position:absolute;
   bottom: -10;
   padding-left: 30;
}

h1
{
    color: black;
}

【问题讨论】：

我很困惑，你的问题到底是什么？你可以尝试在jsfiddle.net 上设置一些东西，以便我们看到你在做什么吗？
当时我认为我的描述不是很好。这是 jsfiddle jsfiddle.net/m8Z25，谢谢。

标签： html css hover

【解决方案1】：

目前还不是 100% 清楚您要在这里实现的目标...

据我所知。它变得几乎不可读，因为您正在向内容容器添加不透明度。这会影响所有内容（包括背景），因此一切都会褪色。

这取决于内容容器背后的内容（您的网站背景）。

您演示的网站不使用不透明度来更改任何内容。我想它只是将背景颜色从浅紫色变为深紫色

尝试删除 opacity:0.30; 并改为更新背景/文本颜色。

有关仅更改颜色与使用不透明度的示例，请参阅 This jsFiddle...

【讨论】：