Div's background Image's position is not changing when links are hovered over..whats wrong in the following css?
CSS and Mark up:-
<style type="text/css">
.mySprite { float:left; display: block; margin-bottom: 5px; }
.container, .id0, .mySprite div { width: 728px; height: 243px; }
.id0, .mySprite:hover div {
background-image: url(images/image.jpg);
background-repeat: no-repeat; }
.container { positio开发者_如何学Gon:relative; }
.id0 { z-index: -2; }
.mySprite div { display: none; z-index: -1; }
.id0, .mySprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
.id1 div { background-position: 0px 0px; }
.id2 div { background-position: 0px -245px; }
.id3 div { background-position: 0px -492px; }
.id4 div { background-position: 0px -737px; }
.id5 div { background-position: 0px -980px; }
</style>
<body>
<div>
<div class="tb" id="lBanner" runat="server">
<div class="container">
<div class="id0" style = "background-image: url(<%=GetImage()%>);"> </div>
<ul>
<asp:Repeater runat="server" ID="rpt1" OnItemDataBound="rpt1_ItemDataBound">
<HeaderTemplate>
<li><a id="a1" href="javascript:void(0);" runat="server">Test here<div id="myDiv1" runat="server"> </div></a></li>
</HeaderTemplate>
<ItemTemplate>
<li><a id="a2" runat="server" href="javascript:void(0);">
<%# Eval("Name").ToString() %></a>
<asp:Label runat="server" ID="lblPID" Visible="false" Text='<%#Eval("PID") %>'></asp:Label><div id="myDiv2" runat="server"> </div></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
</body>
[edit]
I am setting the class attribute of anchor tags in code behind..thats working fine..I can see the classes correctly set for the anchor tags the way they should be ..like class="id1 mySprite", "id2 mySprite" and so on..
[edit] @Pekka :: Position property is there in hover rule ..see:-**
.id0, .mySprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
[edit 2] ok changed
.id1 div { background-position: 0px 0px; }
.id2 div { background-position: 0px -245px; }
.id3 div { background-position: 0px -492px; }
.id4 div { background-position: 0px -737px; }
.id5 div { background-position: 0px -980px; }
to this
.id1 div:hover { background-position: 0px 0px; }
.id2 div:hover { background-position: 0px -245px; }
.id3 div:hover { background-position: 0px -492px; }
.id4 div:hover { background-position: 0px -737px; }
.id5 div:hover { background-position: 0px -980px; }
Still the image position doesn't change when links are hovered over..Helppp!!!
I' am not sure how are you handling the repeater in your code behind, I used this repeater and the background did change while hovering the links:
<asp:Repeater runat="server" ID="rpt1">
<ItemTemplate>
<li>
<a href="#" class="mySprite id<%# ((int)DataBinder.Eval(Container,"ItemIndex")) % 6 + 1%>">
<font color="white"><%#Eval("Name")%></font><div> </div></a>
</li>
</ItemTemplate>
</asp:Repeater>
PS: I used the top most "CSS and Mark up" you posted and tested it on IE.
加载中,请稍侯......
精彩评论