CSS：在Sharepoint中悬停可在Chrome中运行但不适用于IE8（或7 compat）

问题描述

我有一个DataFormWebPart渲染：

I have a DataFormWebPart rendering:

<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可以运行。

In IE the :hover is getting ignored, Chrome it works.

如果我在一个简单的html文件中创建上述内容，则可以在IE中按预期工作。

If I create the above in a simple html file is works as expected in IE.

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

My theory is that WSS is messing with the CSS somehow....

任何人都知道什么或如何跟踪什么搞乱了：悬停选择器？

Anybody know what or how to trace what is messing with the :hover selector?

推荐答案

：所有浏览器都不接受所有元素的悬停。要修复此问题，您必须在.menuitem中放置一个a标记并使用.menuitem a和.menuitem a：悬停，或使用javascript在悬停时执行某些操作

the :hover is not accepted on all elements by all browsers. To fix this you have to either place an "a" tag inside of .menuitem and use .menuitem a and and .menuitem a:hover, or use javascript to perform something on a hover

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

you could easily use jQuery's .hover function to perform an action.

这篇关于CSS：在Sharepoint中悬停可在Chrome中运行但不适用于IE8（或7 compat）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！