IE9 CSS悬停无法正常工作

Question

除了Explorer 9之外，此CSS均可在所有浏览器上正常工作。问题在于：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

.programItem的第一个<a>标记未在您的代码中关闭：

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

另外，您的目标是.navSubMenu .mainMenuContent .programItem:hover a.hoverGreen但是HTML中没有.navSubMenu父.navSubMenu

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