IE7 翻转不工作

Question

我有一些代码在 IE8、FF 和 IE8 中运行良好。 PC 上有 Safari，但 IE7 上没有。这个想法是有一个大按钮，标签中带有背景图像，文本和内容包含在标签中。前景图像。当用户将鼠标滑过按钮时，背景图像将替换为不同的图像：

CSS：

ul { list-style-type:none; }

ul li { display:inline; }

ul li.link a {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtn.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    }

ul li.link a:hover {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtnover.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    cursor:pointer;
    }

HTML：

<ul>
<li class="link">
<a id="button1" class="btn">
<div class="btntitle"><p><strong>A title</strong></p></div>
<div class="btnpic"><img src="pic.jpg" /></div>
</a>
</li>
...
</ul>

在 IE7 中，悬停时不会替换图像，并且光标不会更改为指针。即使我从 css a:hover 中删除了大部分内容，并且只有 a:hover {cursor:pointer;它仍然不起作用（即光标没有改变）。我已经用谷歌搜索了这个年龄&一定缺少一些明显的东西......还有想法？

谢谢， G

Answer 1

将 div 更改为 span。 XHTML 和 HTML <5 不允许 div 位于 a 内。

编辑：哦，当你这样做时，删除 p，因为 span 内的 p 是不允许的。 :)

编辑 2：向 a 标记添加 href 属性。