开发者

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

开发者 https://www.devze.com 2023-01-11 06:32 出处:网络
this seems very simpl开发者_JAVA百科e and im puzzled as to why its not working...I want to change the background image of a DIV when rolling over it. It works on chrome and FF on a mac - but then not

this seems very simpl开发者_JAVA百科e and im puzzled as to why its not working...I want to change the background image of a DIV when rolling over it. It works on chrome and FF on a mac - but then not FF, IE on PC

CSS - /media/css/mystandard.css

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

HTML

<HTML> <HEAD> <link rel="stylesheet" href="/media/css/mystandard.css"/></HEAD><BODY>        
<div class="flipper" >  
hello stack overflow!               
</div>
</BODY></HTML>

re:Catfish

Thanks for the tip. Unfortunately I can't use the tags because I plan on having the background color of a full DIV change (sort of like twitter.com Tweets view on rollover) and dont want to make all the text in the div a link


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


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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号