ansaurus

Question

background-color change on rollover not working in IE, FF

Answer 1

+1 A:

Not all browsers support the :hover pseudo attribute on anything except an anchor tag <a>. You'll have to change you're html to

<HTML><BODY> <HEAD> import CSS here </HEAD>     
<div class="flipper" >
<a href="#">  
hello stack overflow!
</a>               
</div>
</BODY></HTML>

and youre css to

div.flipper a{background-color: #FFFFFF;}
div.flipper a:hover {background-color: #F8FBFE;}

Catfish 2010-08-13 21:09:41

thanks, see above, i cant use the <a> tags =(

JiminyCricket 2010-08-13 21:17:46

Answer 2

+1 A:

If you have to use a <div>, you'll need to use javascript to do the hover. I suggest using jQuery for simplicity:

$("div.flipper").hover(
  function() { $(this).addClass("hover"); },
  function() { $(this).removeClass("hover"); }
);

Then change your CSS to:

div.flipper {background-color: #FFFFFF;}
div.hover   {background-color: #F8FBFE;}

cam 2010-08-13 21:30:20

where do i put the jquery function?

JiminyCricket 2010-08-13 21:42:00

nevermind figured it out thanks!http://stackoverflow.com/questions/275891/jquery-hover-and-class-selector

JiminyCricket 2010-08-13 21:49:52

hmm its stil not working on a pc...

JiminyCricket 2010-08-13 23:51:58

do you have a link to the page in question?

cam 2010-08-14 07:59:28

unfortunately not, its behind a firewall. i fixed the show hide issue but now there is a problem with IE where the rollover doesnt always work. see my new post http://stackoverflow.com/questions/3550259/hover-in-ie-not-working-when-hovering-over-full-div

JiminyCricket 2010-08-23 17:56:08

Answer 3

A:

your problem is with your link for css. You have <link rel="stylesheet" href="/media/css/mystandard.css"/>

the first slice before media creates the problem. Use this <link rel="stylesheet" href="media/css/mystandard.css"/>

Sotiris 2010-08-14 07:11:55

ansaurus

tags:

views:

answers:

background-color change on rollover not working in IE, FF

related questions