Question

我有一个包含Treeview控件的Web表单。我正在尝试使用树视图创建鼠标悬停菜单。

代码

 <asp:TreeView ID="TreeView1" runat="server" BackColor="#00CCFF" Font-Bold="True" Height="498px" ImageSet="Contacts"  NodeIndent="10" Width="1290px">
             <HoverNodeStyle Font-Underline="False" />
             <Nodes> 

                   <asp:TreeNode Text="Home" NavigateUrl="~/Home.aspx" Target="_blank"/>    
                    <asp:TreeNode Text="Employee" NavigateUrl="~/Employee.aspx" Target="_blank">    
                      <asp:TreeNode Text="Upload Resume" NavigateUrl="~/Upload_Resume.aspx" Target="_blank" />    
                      <asp:TreeNode Text="Edit Resume" NavigateUrl="~/Edit_Resume.aspx" Target="_blank" />    
                      <asp:TreeNode Text="View Resume" NavigateUrl="~/View_Resume.aspx" Target="_blank" />    
                   </asp:TreeNode>    
                   <asp:TreeNode Text="Employer" NavigateUrl="~/Employer.aspx" Target="_blank">    
                        <asp:TreeNode Text="Upload Job" NavigateUrl="~/Upload_Job.aspx" Target="_blank" />    
                        <asp:TreeNode Text="Edit Job" NavigateUrl="~/Edit_Job.aspx" Target="_blank" />    
                        <asp:TreeNode Text="View Job" NavigateUrl="~/View_Job.aspx" Target="_blank" />    
                   </asp:TreeNode>    
                   <asp:TreeNode Text="Admin" NavigateUrl="~/Admin.aspx" Target="_blank">    
                       <asp:TreeNode Text="Add User" NavigateUrl="~/Add_User.aspx" Target="_blank" />    
                       <asp:TreeNode Text="Edit User" NavigateUrl="~/Edit_Use.aspx" Target="_blank" />    
                       <asp:TreeNode Text="View User" NavigateUrl="~/View_User.aspx" Target="_blank" />    
                   </asp:TreeNode>    
             </Nodes>  

             <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
             <ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" />
             <SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" />

        </asp:TreeView>

如何将鼠标事件添加到树视图控件中

Answer 1

尝试样式化树节点

 .NodeStyle
        {
    width: 140px;
    font-size: 10px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px Transparent;
    padding: 2px 2px 2px 2px;
}

.NodeStyle:hover,
a.NodeStyle:hover,
.NodeStyle:link:hover,
a.NodeStyle:link:hover
{
    font-size: 10px;
    display: block;
    text-decoration: none;

    color: #003687;
    border: solid 1px #71a9ff;
    background-color: #c6ddff;
    padding: 2px 2px 2px 2px;
}

.HoverNodeStyle
{
    font-size: 10px;
    display: block;
    text-decoration: none;

    color: #ffffff;
    border: solid 1px Transparent;
    padding: 2px 2px 2px 2px;
}

.HoverNodeStyle:hover,
a.HoverNodeStyle:hover,
.HoverNodeStyle:link:hover,
a.HoverNodeStyle:link:hover
{
    font-size: 10px;
    display: block;

    text-decoration: none;
    color: #003687;
    border: solid 1px #71a9ff;
    background-color: #c6ddff;
    padding: 2px 2px 2px 2px;
}

.SelectedNodeStyle
{
    font-size: 10px;
    display: block;

    text-decoration: none;
    color: aquamarine;
    border: solid 1px Transparent;
    padding: 2px 2px 2px 2px;
}

.SelectedNodeStyle:hover,
a.SelectedNodeStyle:hover,
.SelectedNodeStyle:link:hover,
a.SelectedNodeStyle:link:hover
{
    font-size: 10px;
    display: block;

    text-decoration: none;
    color: #71a9ff;
    border: solid 1px #71a9ff;
    background-color: bisque;

    padding: 2px 2px 2px 2px;
}

使用TreeView控件悬停菜单

1 个答案: