opacidad de css en el desplazamiento del div

Question

Soy nuevo en CSS. Solo quiero un div sobre otro div en vuelo estacionario y su transparencia debería aumentar. Yo he hecho algo como ese archivo

<div id="maincontainer"> 
<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div> 
<h1>A floating image</h1> 
<p id="bill"></p> 
<div id="mem">sfasdf</div> 
</div> 
<div id="column1"> 
<p>Haec disserens qua de re agatur et in quo causa consistat non 
videt...</p> 
</div> 
<div id="column2"> 
<p>causas naturales et antecedentes, idciro etiam nostrarum 
voluntatum...</p> 
</div> 
<div id="column3"> 
<p>nam nihil esset in nostra potestate si res ita se haberet...</p> 
</div> 
<div id="slide"> 
<ul> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
</ul> 
</div> 
<div id="left">l</div> 
<div id="right">R</div> 

y CSS es

body { 
    background-color: #FFCC66; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: 50% 100%; 
    margin-top: 100px; 
    margin-right: 40px; 
    margin-bottom: 100px; 
    margin-left: 70px; 
} 

#picture { 
    height: 200px; 
    width: 170px; 
    float: left; 
} 

#column1 { 
    float: left; 
    width: 33%; 
} 

#column2 { 
    float: left; 
    width: 33%; 
} 

#column3 { 
    float: left; 
    width: 33%; 
} 

#bill { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    letter-spacing: 2px; 
    text-align: justify; 
    line-height: 20px; 
} 

#mem { 
    position: absolute; 
    top: 300px; 
    left: 150px; 
} 

#slide { 
    overflow: hidden; 
    position: absolute; 
    height: 220px; 
    width: 300px; 
    top: 500px; 
    left: 400px; 
    background-color: #333399; 
    z-index: 1; 
} 

#left { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #FF33CC; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    vertical-align: middle; 
    opacity: .5; 
} 

#left :hover { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #CCCC00; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    filter: alpha(opacity = 10); 
    -moz-opacity: 10; 
    -khtml-opacity: 10; 
    opacity: 10; 
    cursor: pointer; 
} 

Quiero aumentar la transparencia del div con id a la izquierda en vuelo estacionario

Answer 1

No he mirado de cerca a su código pero una cosa:

Este

es muy probable que no sea lo que desea. ¿Quieres

#left:hover{ 

que significa, el elemento con el ID left cuando el ratón pasa sobre ella. Quizás eso ya ayude a resolverlo.

Answer 2

estoy flotando miedo de div elementos no se admite en nuestro navegador favorito (IE6), pero si usted está dispuesto a soltar, el siguiente código debería funcionar:

#left { 
    opacity: 0.6; /* css standard */ 
    filter: alpha(opacity=60); /* internet explorer */ 
} 

#left:hover { 
    opacity: 1; /* css standard */ 
    filter: alpha(opacity=100); /* internet explorer */ 
} 

Answer 3

Si desea transparencia en los navegadores antiguos usa un .png transparente con un gris claro o lo que sea y aplícalo como un div encima de tu otro div. Asegúrate de usar la posición: fija para que flote junto con el desplazamiento, de lo contrario a medida que te desplazas, terminas debajo de ella.