如何实现悬浮层效果

首先把弹出悬浮层所需要的CSS样式定义列出来: .tooltips{ position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ display:block; position:absolute; top:0px; left:150px; border:1px dashed blue; background-color:#ccFFFF;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=orange,endColorStr=white); padding: 3px; color:black; }   那么在前台网页中应该按如下方式应用: <a class="tooltips" href="#tooltips" mce_href="#tooltips"> <asp:Image ID="Image1" runat="server" Height="106px" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"picture") %>' Width="160px" /> <span> <asp:Image ID="Image2" runat="server" Width="300px" Height="300px" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"picture") %>' /> </span> </a> 这样就实现了如下效果:当鼠标移至Image1上面的时候,Image2会以悬浮层的方式显示出来!

你可能感兴趣的:(image,server,css,IE,Class,asp)