CSS: наведите курсор на Sharepoint работает в Chrome, но не IE8 (или 7-совместимом)

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 selector?

Answer 1

: hover не поддерживается всеми элементами во всех браузерах. Чтобы это исправить, вы должны либо разместить тег «a» внутри .menuitem и использовать .menuitem a и и .menuitem a: hover, либо использовать javascript для выполнения чего-либо на hover

Вы можете легко использовать функцию jhou .hover для выполнения действия.

Answer 2

Поскольку многие отметили, что только несколько элементов допускают псевдо: hover в IE, код будет выглядеть следующим образом:

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

Используя jQuery или другие способы js, он сохранил бы исходный код, изменив .MenuItem a: hover на .MenuHover и

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

Answer 3

IE 6, 7 и 8 (в режиме причуд) не поддерживают псевдокласс CSS: hover для произвольных элементов. Для распознавания IE существует javascript shims: hover .

Answer 4

Я обнаружил, что версия браузера и SharePoint значительно усложняют CSS. Я думаю, что ваше решение будет для устранения неполадок.

Во-первых, вам нужно понять порядок обработки CSS-файлов, просмотрев полученный HTML-код. SharePoint добавляет собственные ссылки на CSS, которые могут переопределять ваши собственные классы CSS. Я бы также предложил использовать инструменты разработчика Firebug и / или IE8, чтобы понять, какие классы применяются к вашим HTML-элементам и / или любым родительским элементам.

Я обнаружил, что объявление HTML (строгое, переходное) влияет на то, как некоторые браузеры определяют, какой класс применять к данному элементу при возникновении конфликта. Я также обнаружил, что SharePoint добавляет! Важно к некоторым из их классов CSS, что также влияет на то, как браузер принимает решение в присутствии конфликтующего CSS.

Надеюсь, это поможет. Я знаю, что это не ответ, но, возможно, он поможет вам определить / разрешить проблему.