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

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.