【问题标题】:BG image mouseover working fine, exept on IEBG 图像鼠标悬停工作正常,除了在 IE 上
【发布时间】:2013-11-17 10:26:29
【问题描述】:

希望你能帮助我:-)

我的 html 代码在 Google Chrome 和 Firefox 中运行良好,但在 IE10 中却不行。 谁能看出代码有什么问题?

我的网站: http://produkt-guiden.dk/testside2

我的代码:

<style type="text/css">
#cell1 {
  width: 610px;
  height: 1000px;
  vertical-align: middle;
  background-image: url(/media/wysiwyg/guiden1.png)
}
#cell1:hover {
  background-image: url(/media/wysiwyg/guiden0.png)
}
</style>
</head>

<body>
<table border="0">
<tbody>
<tr>
    <td id="cell1"><iframe src="myiframeurlcode" frameborder="0" scrolling="auto" marginheight="0" allowtransparency="true" width="610px" height="1500px">iframe not supported!</iframe></td>
</tr>
</tbody>
</table>

【问题讨论】:

    标签: html css internet-explorer hover mouseover


    【解决方案1】:

    看起来 IE10 的背景颜色/图像与悬停 (discussed here) 存在问题。我建议使用 JavaScript 在 mouseenter 和 mouseleave 上按名称“悬停”添加/删除一个类。在css中改变

     #cell1:hover {
      background-image: url(/media/wysiwyg/guiden0.png)
     }
    

     #cell1.hover {
      background-image: url(/media/wysiwyg/guiden0.png)
     }
    

    【讨论】:

    • 您好,感谢您的回复 :) 您建议我必须使用什么 JavaScript?无法将我的 css 代码从 : 更改为 .
    • $('#cell1').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}) 如果您使用的是 jquery,则可以这样做
    猜你喜欢
    • 2012-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多