This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work at all.
.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; }
Here is the corresponding HTML code:
<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>
Upon hovering over the div element, the hover effect sometimes triggers and sometimes does not, resulting in inconsistency and occasional stacking which requires moving the mouse again to release the effect properly. It's clear that this implementation is not functioning as intended.