Question

下面的代码我有问题。当我将鼠标悬停在菜单项的departmentsHover类上时，不会影响菜单项。颜色和背景图像不会更改。

我该怎么办？

P.S我在环境中使用MS visual Studio 2010和asp.net。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .departmentsHover
        {
            color:Red;
            padding-left:4px;
            background-color:green;
                background-image:url("tile.jpg");
            width:150px;
        }
        .departments
        {
            color:Black;
            background-color:red;
            margin:2px;
            padding:4px;
            width:100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:Menu ID="Menu1" runat="server"  >


        <Items>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>

        </Items>

        <StaticMenuItemStyle CssClass="departments"/>
        **<StaticHoverStyle  CssClass="departmentsHover"/>**

        <StaticMenuStyle CssClass="mainmenu" />

    </asp:Menu>

    </div>
    </form>
</body>
</html>

Answer 1

为什么不使用css hover

.departments:hover
        {
            color:Red;
            padding-left:4px;
            background-color:green;
                background-image:url("tile.jpg");
            width:150px;
        }

Answer 2

试试这种方式

<asp:Menu ID="Menu1" runat="server" CssClass="departments" >
        <Items>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>
            <asp:MenuItem Text="ada"></asp:MenuItem>

        </Items>    

</asp:Menu>

并以您的风格

 <style type="text/css">
        .departments:hover
        {
            color:Red;
            padding-left:4px;
            background-color:green;
            background-image:url("tile.jpg");
            width:150px;
        }
        .departments
        {
            color:Black;
            background-color:red;
            margin:2px;
            padding:4px;
            width:100px;
        }
    </style>

当我将鼠标悬停在MenuItems上时，菜单项不会更改。在Asp.net上

2 个答案: