CSS :hover in Sharepoint works in Chrome but not IE8( or 7 compat)

Question

我有一个 DataFormWebPart 渲染:

<th class="MenuItem">
    <xsl:attribute name="onclick" >window.location="<xsl:value-of select="substring-before(@URL, ', ')" ></xsl:value-of>"</xsl:attribute>
    <xsl:value-of select="@Comments" disable-output-escaping="yes"  />
</th>

像这样的 CSS:

.MenuItem
{       
    background-color:aqua;
    border: thick red solid;
    border-top: 0;
    border-bottom: 0;
    padding:.25em;
    padding-left:1em;
    padding-right:1em;
}

.MenuItem:hover
{       
    background-color:green;
}

在 IE 中，:hover 会被忽略，Chrome 可以。

如果我在一个简单的 html 文件中创建上面的内容，那么在 IE 中可以正常工作。

我的理论是 WSS 以某种方式扰乱了 CSS...

有人知道什么或如何追踪 :hover 选择器的问题吗？

Answer 1

并非所有浏览器都接受所有元素上的 :hover。要解决此问题，您必须在 .menuitem 内放置一个“a”标签并使用 .menuitem a 和 .menuitem a:hover，或者使用 javascript 在悬停时执行某些操作

您可以轻松地使用 jQuery 的 .hover 函数来执行操作。