Question

除了Explorer 9之外，这个css在每个浏览器上运行良好问题在于：悬停有时它有效，有时不行。 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，但HTML中没有.navSubMenu的父级

Answer 2

尝试使用严格的HTML 4 doctype，如本文所述：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; }

IE9 CSS悬停无法正常工作

3 个答案: