IE7 翻转不工作

Question

我有一些代码在 PC 上的 IE8、FF 和 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 a 中使用 div。

编辑：哦，当您使用它时，请删除p，因为不允许在span 中使用p。 :)

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