i am using the following code to show a background image when the mouse moves on a div

<div class="logobg">
</div><!-- logobg ends -->

.logobg{
float: left;
width: 736px;
height: 384px;
background: url(logo.jpg) no-repeat 0px 0px;
}

.logobg:hover{
float: left;
width: 736px;
height: 384px;
background: url(logorollover.jpg) no-repeat 0px 0px;
}

this is working fine in all browsers except for ie6 in ie 6 when i move the mouse over the logogb div the logorollover.jpg does not appear

i have tried the following

<div class="logobg">
<!--[if IE 6 ]>
<div id="logo">
<img src="assets/img/logo.jpg" id="logoie" onmouseover="over()" onmouseout="out()">
</div>
<![endif]-->
</div><!-- logobg ends -->

function over(){
document.getElementById("logoie").src="logorollove r.jpg";
}

function out(){
document.getElementById("logoie").src="logo.jpg";
}

also tried using

function over(){
var imgsrc=document.getElementById("logoie").getAttrib ute("src");
document.getElementById("logoie").setAttribute("sr c",
"logorollover.jpg");
}

function out(){
var imgsrc=document.getElementById("logoie").getAttrib ute("src");
document.getElementById("logoie").setAttribute("sr c", "logo.jpg");
}

the image is not changing in ie6

please advice thanks

IE<7 only support hover pseudo class on links (a tag).
I usually use whatever:hover to fix this issue.