html - Div类:hover not working properly in IE

标签 html css

请使用 Internet Explorer 查看下面的链接

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

似乎当我尝试将鼠标悬停在声明的 div 类上时,:hover 无法正常工作,但在 chrome 中它工作正常。知道为什么吗?

请仅使用 CSS 解决方案!

这是 CSS 编码

#f12{
    width: 400px;
    height: 30px;
    left: 470px;
    top: 1090px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    float: left;
    border-width: 1px;
    border-style: inset;
    z-index: 99999;
}

#f12:hover ~ #floater{
    background:url(images/flavours/f12.jpg);
    width: 320px;
    height: 320px;
    opacity: 100;
    top: 30%;
    left: 0%;
    filter: alpha(opacity=100);
    float: left;
    position: fixed;
}

#f13{
    width: 100px;
    height: 50px;
    left: 550px;
    top: 460px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    float: left;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    transition: 1s all;
    border-width: 1px;
    border-style: inset;
}

#f13:hover ~ #floater{
    background: url(images/flavours/f12.jpg);
    opacity: 100;
}

#floater{
    width: 320px;
    height:320px;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 30%;
    filter: alpha(opacity=0);
    float: left;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    border-width: 1px;
    border-style: inset;
    filter: alpha(opacity=100);
}

最佳答案

您有两个文档类型,第一个文档类型错误地将 IE 置于怪异模式。只需删除它们并使用这个:<!DOCTYPE html>

关于html - Div类:hover not working properly in IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12603497/

相关文章:

php - 在自定义主题 wordpress 上添加下拉菜单

javascript - 是否可以跳入 slider ?

javascript - js函数调用一次后页面卡住

html - 文本对齐不起作用,footbar div 没有出现?

c++ - Qt:更改 html 标签的颜色不起作用

html - 画线的更好方法?

html - 在同一行的元素之间创建视觉边界

html - 可调整大小的导航栏

html - 不同浏览器的行高和字体大小?

html - CSS 和 JS 外部链接服务器部署