độ mờ đục css khi di chuột qua div

Question

Tôi mới sử dụng CSS. Tôi chỉ muốn một div trên div khác trên di chuột và tính minh bạch của nó sẽ tăng lên. Tôi đã thực hiện một số điều như thế tập tin

<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> 

và css là

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; 
} 

Tôi muốn tăng tính minh bạch của div với id trái trên di chuột

Answer 1

Tôi đã không nhìn kỹ vào mã của bạn nhưng một điều:

Điều này

#left :hover{ 

rất có thể không phải là thứ bạn muốn. Bạn muốn

#left:hover{ 

có nghĩa là, phần tử có ID left khi chuột di chuột qua nó. Có thể điều đó đã giúp giải quyết nó.

Answer 2

Tôi lơ lửng sợ div yếu tố không được hỗ trợ trong trình duyệt yêu thích của chúng tôi (IE6), nhưng nếu bạn sẵn sàng thả hỗ trợ, các mã sau đây nên làm việc:

#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

Nếu bạn muốn sự minh bạch trên các trình duyệt cũ sử dụng .png trong suốt với màu xám nhạt hoặc bất kỳ thứ gì và áp dụng nó làm div trên đầu div khác của bạn. Hãy chắc chắn rằng bạn sử dụng vị trí: cố định để nó nổi cùng với cuộn, khác khi bạn di chuyển bạn kết thúc bên dưới nó.