程序员经验分享-hwhale

当链接悬停在 Div 的背景图像上时，图像的位置不会改变。以下 css 有什么问题吗？

2023-12-15

CSS 和标记：-

<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  { position: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()%>);">&nbsp;</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">&nbsp;</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">&nbsp;</div></li>
                        </ItemTemplate>
                    </asp:Repeater>

</ul>
    </div>
    </div>
    </div>
 
</body>

[edit]

我在后面的代码中设置锚标记的类属性..工作正常..我可以看到为锚标记正确设置的类，它们应该是..像 class="id1 mySprite"、"id2 mySprite" 和很快..

[编辑] @Pekka :: Position 属性存在于悬停规则中..参见：-**

.id0, .mySprite:hover div { 位置：绝对；顶部：0px；左：0px；显示：块； }

[编辑2] 好的，改变了

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

当链接悬停在上面时，图像位置仍然没有改变..Helppp!!!


我不确定您如何处理后面代码中的转发器，我使用了此转发器，并且在悬停链接时背景确实发生了变化：

<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>&nbsp;</div></a>
        </li>
    </ItemTemplate>
</asp:Repeater>

PS：我使用了你发布的最上面的“CSS和标记”并在IE上进行了测试。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

c

aspnet

html

css

当链接悬停在 Div 的背景图像上时，图像的位置不会改变。以下 css 有什么问题吗？ 的相关文章

随机推荐

热门标签