transparency - 半透明 div 当光标在它们上方时变为不透明

Question

我有一个 wordpress 网站，我想制作一个带有全屏背景图像和 2 个小的、响应式和居中的框架（div？）的欢迎页面，具有半透明背景但不透明的文本。当光标在其中一个 div 上时，我想让它像这个网站一样完全不透明：http: //www.newzealand.com/

作为一个初学者，你能帮我吗，因为现在我使用了包含文本的 png，但当然我的文本也变成了半透明的......这是我的网站：http: //vincentfournet.fr/

多谢

Answer 1

您可以更改 div.rgba() 的背景样式，从而为您提供透明度。并使用 :hover 伪元素。（IE6 不支持 :hover on div。如果你确实需要迎合那些老浏览器用户，你可以使用 javascript 来实现兼容性）

<div class='container'>
  <div id='div1'> TEXT HERE </div>
  <div id='div2'> NORE TEXT </div> 
</div>
//css, other styles ommited
#div1:hover, #div2:hover {background: rgba(0,0,0,0.95);} /*95% opaque*/
.container {background: rgba(0,0,0,0.7);}

我认为它会成功的。这是演示http://jsfiddle.net/2Rpps/