当我将鼠标悬停在菜单项上时,菜单项不会改变.在Asp.net上



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

我必须做什么?

p。我使用的是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>

为什么不直接使用css hover

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

试试这个

<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>

最新更新