IE9 CSS наведение не работает должным образом

Question

Этот CSS хорошо работает на всех браузерах, кроме Explorer 9. Проблема в том, что hover иногда работает, а иногда нет. Css:

.navSubMenu .mainMenuContent .programItem:hover a.hoverGreen { color: #b3dd0c;  }
.navSubMenu .mainMenuContent .programItem:hover a.hoverWhite { color: #fff; }
.navSubMenu .mainMenuContent .programItem a.hoverWhite:hover { color: #b3dd0c;  } 
.navSubMenu .mainMenuContent .programItem:hover a.hoverRed { color: #A80000; }

HTML:

<div class="mainMenuContent">
                            <div class="mainMenuContentWrapper">
                                <Adam:Repeater ID="Rpt_Programs" runat="server" DataItemTypeName="Reshet.Objects.ObjectInfo">
                                    <ItemTemplate>
                                        <div class="programItem">
                                            <a href="<%#Container.DataItem.Link.HeyperJustLink() %>">
                                                <%#Container.DataItem.MediaMedium %>
                                                <div class="programTitle">
                                                    <%#Container.DataItem.Name%></div>
                                                <a href="<%#Container.DataItem.Link.HeyperJustLink()%>" class="hoverGreen">לאתר</a>
                                                <span class="divider"></span><a href="<%#Container.DataItem.ItemLink.HeyperJustLink() %>"
                                                     class="hoverWhite">לפרק האחרון</a>
                                                <div class="addToFavWrapper">
                                                    <%-- <img class="addToFavBtn" src="<%=SiteUrl %>/images/n_Images/Headers/plus_normal.png" alt="">
                                    <img class="addToFavBtn_over" src="<%=SiteUrl %>/images/n_Images/Headers/plus_over.png" alt="">--%>
                                                </div>
                                        </div>
                                    </ItemTemplate>
                                </Adam:Repeater>
                            </div>
                            <a href="<%=SiteUrl %>/Shows/VOD/" class="allBtn greenBtn">לכל התוכניות</a>
                        </div>

Когда я перемещаю мышь по элементу div, зависание иногда происходит, а иногда нет, иногда складывается, пока я снова не наведу мышь, а затем она иногда отпускается. Так что это не работает должным образом на всех.

Answer 1

Первый <a> тег внутри .programItem не закрыт в вашем коде:

<div class="programItem">
    <a href="<%#Container.DataItem.Link.HeyperJustLink() %>">

Также вы нацеливаетесь .navSubMenu .mainMenuContent .programItem:hover a.hoverGreen Однако нет родителя .navSubMenu в вашем HTML

Answer 2

Попробуйте использовать строгий тип документа HTML 4, как в этой статье: http://www.bernzilla.com/item.php?id=762

Хотя в статье говорится о IE7, это исправление решило проблему для тех, у кого была такая же проблема в IE9.

Answer 3

Вам нужно двигаться :hover к a элементы, пример:

.navSubMenu .mainMenuContent .programItem a.hoverGreen:hover { color: #b3dd0c; }
.navSubMenu .mainMenuContent .programItem a.hoverWhite:hover { color: #fff; }
.navSubMenu .mainMenuContent .programItem a.hoverWhite:hover { color: #b3dd0c; } 
.navSubMenu .mainMenuContent .programItem a.hoverRed:hover { color: #A80000; }