on hover background image

[sudhakararaog]

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="logorollover.jpg";
}

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

also tried using

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

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

the image is not changing in ie6

please advice thanks

[iandevlin]

IE6 does not support :hover on any element other than a.

A fix like csshover (http://www.xs4all.nl/~peterned/csshover.html) might help.