Question

我使用DataPager在这样的网页之间导航：

<asp:ListView ID="ListView1" runat="server" EnableViewState="false" OnPreRender="ListView1_PreRender">
        <ItemTemplate>

<a><asp:HyperLink ID="HyperLink1" runat="server" ToolTip='<%# Eval("Title") %>' NavigateUrl='<%# "../books/bookdetails.aspx?Id=" + Eval("Id").ToString() %>' ImageHeight="250" ImageWidth="180"></asp:HyperLink></a>
        </ItemTemplate>
        <LayoutTemplate>
            <li runat="server" id="itemPlaceholder" />
            <div class="page-numbers">
                <asp:DataPager ID="lvDataPager1" runat="server" PageSize="6">
                    <Fields>
                        <asp:NextPreviousPagerField FirstPageText="Back" ShowFirstPageButton="True"
                            ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        <asp:NumericPagerField />

                        <asp:NextPreviousPagerField LastPageText="Forward" ShowLastPageButton="True"
                            ShowNextPageButton="False" ShowPreviousPageButton="False" />
                    </Fields>
                </asp:DataPager>
            </div>
        </LayoutTemplate>
</asp:ListView>

对于悬停效果我使用此CSS：

div.page-numbers a:hover {
        color: #fff;
        background-color: #1078a5;
        -moz-transition: .2s linear;
        -webkit-transition: .2s ease-out;
        transition: .2s linear;
        border-color: #1078a5;
    }

现在如何更改活动页码的background-color，因为我无法让它工作。我试过这样的事情：

div.page-numbers a:active {
        color: #fff;
        background-color: #4a7bb8;
    }

但它不起作用。

Answer 1

您滥用:active伪选择器。

例如，在超链接中，:active选择器下的样式仅在用户单击链接时应用。 Check its definition.

如果要设置当前页码的样式，首先应使用CurrentPageLabelCssClass标记中的属性asp:NumericPageField为其设置类：

然后，您可以为该类创建CSS规则：

.current-page {
    color: #fff;
    background-color: #4a7bb8;
}

在asp：DataPager中突出显示所选页码

1 个答案: