0

Can someone help me take a look at this please,

Here is the link to my website:

http://mojogobbles.com.sg/cupcake-menu/

Here is my css coding for the div class and also the html

CSS

#f1{
 width: 100px;
 height: 50px;
 left: 370px;
 top: 450px;
 background:black;
 position: absolute;
 opacity:0;
 filter: alpha(opacity=0);
 float: left;
 -webkit-transition: 1s all;
 -moz-transition: 1s all;
 transition: 1s all;
 }
#f1:hover {
 background:url(images/flavours/f1.jpg);
 width: 320px;
 height: 320px;
 opacity:100;
 filter: alpha(opacity=100);
 float: left;
 position: absolute;
 }

HTML

<div id="f1"></div>

The hover does not work for IE! Many thanks in advance!

strauberry
  • 4,189
  • 5
  • 34
  • 50
Rui He Zhengrui
  • 55
  • 3
  • 9

2 Answers2

1

Depending on which version of IE... I think < 7 does not support the :hover pseudo-class on any element other than the intended anchor a element.

Edit, also this might help for IE7:

:hover pseudo-class of CSS does not work in IE7

Community
  • 1
  • 1
Alex
  • 7,320
  • 1
  • 18
  • 31
1

Try to add HTML 4.01 Strict DOCTYPE on the top of your page to get it work in IE.

This is for IE>=7

pankar
  • 1,623
  • 1
  • 11
  • 21
  • For IE transitions consult this post: http://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie – pankar Sep 25 '12 at 10:28