css opacity on hover of div

Question

Hi all. I am new to CSS. I just want a div over another div on hover and its transparency should increase. I have done some thing like that

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

and css file is

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

I want to increase transparency of div with id left on hover

Answer 1

I haven't looked closely at your code but one thing:

This

   #left :hover{

is most likely not what you want. You want

   #left:hover{  

it means, the element with the ID left when the mouse hovers over it. Maybe that already helps solve it.

Answer 2

I'm afraid hovering of DIV elements is not supported in our favourite browser (IE6), but if you're willing to drop support, the following code should work:

#left{
    opacity:0.6; // css standard
    -moz-opacity:0.6; // older versions of firefox
    filter:alpha(opacity=60); // internet explorer
    }

#left:hover{
    opacity:1; // css standard
    -moz-opacity:1; // older versions of firefox
    filter:alpha(opacity=100); // internet explorer
    }