Example of Transpant elment in CSS

This is the HTML thats used in the example

Item 1
Item 2
<div id="mainHolder"> <div id="myItem1" onmouseover="this.className = 'hovered';" onmouseout="this.className = '';"> Item 1 </div> <div id="myItem2" onmouseover="this.className = 'hovered';" onmouseout="this.className = '';"> Item 2 </div> </div>

Bellow os the CSS :


#myItem1 {
    width:100px; 
    height:50px;
    border:solid 2px white;
    background-color:yellow; 
    color:red;
    poition:relative; 
    top:0px;
    left:0px; 
    float:left;
    text-align:center;
    line-height:50px;
}

#myItem2 {
    width:100px; 
    height:50px;
    border:solid 2px white;
    background-color:green; 
    color:red;
    poition:relative; 
    top:0px;
    left:0px; 
    float:left;
    text-align:center;
    line-height:50px;

}

div.hovered { 
    opacity:.5;
    filter:alpha(opacity:50); 
}
Last Updated : 17/06/2008 @ 12:23