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

Question

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>

With CSS like:

.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;
}

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

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

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?

Answer 1

I found that the browser version and SharePoint add significant complexity to CSS. I think your solution will be to troubleshoot.

First, you need to understand the order that the CSS files are processed in by viewing the resulting HTML. SharePoint adds its own references to CSS that might override your own CSS classes. I would also suggest using Firebug and/or IE8's developer tools to understand which classes are applied to your HTML elements and/or any parent elements.

I found that the HTML declaration (strict, transitional) influenced how some browsers determined which class to apply to a given element when a conflict exists. I also found that SharePoint adds !important to a few of their CSS classes which also impacts how the browser makes a decision in the presence of conflicting CSS.

I hope this helps. I know it's not an answer but perhaps it will help you identify/resolve the problem.

Answer 2

IE 6, 7 and 8 (when in quirks mode) do not support the CSS :hover pseudo class on arbitrary elements. There are javascript shims to make IE recognize :hover.

Answer 3

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

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

Answer 4

Since many pointed out that only a few elements allow the :hover pseudo in IE, here's how the code would look:

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

.MenuItem
{       
    border: thick red solid;
    border-top: 0;
    border-bottom: 0;
}

.MenuItem a
{
    display: inline-block;
    padding:.25em;
    padding-left:1em;
    padding-right:1em;
    background-color:aqua;
}

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

With jQuery or other js ways, it would keep the original code, change the .MenuItem a:hover to a .MenuHover class and:

$(document).ready(function() { 
    $(".MenuItem").hover(function() { 
        $(this).addClass("MenuHover"); 
    }, function() { 
        $(this).removeClass("MenuHover"); 
    });
});