如何在asp.net中悬停时突出显示一行多个列表框？答案

【问题标题】：How to highlight a row of multiple list boxes on hover in asp.net?如何在asp.net中悬停时突出显示一行多个列表框？
【发布时间】：2018-05-16 21:18:13
【问题描述】：

我有 2 个列表框，目前我可以将鼠标悬停在列表框上并在鼠标悬停时突出显示一个项目。但是我希望这样当我将鼠标悬停到 listbox1 或 listbox2 时，两个列表框中的项目都会在我悬停时突出显示。

这是我现在得到的：

我希望在鼠标悬停时突出显示 listbox1 和 listbox2 的第一项。

我已经研究了几个小时来研究如何做到这一点，但似乎没有一个对我有用。

同样，如果我单击 listbox1 或 listbox2，我也可以选择一行。

我不熟悉 jQuery 或 Javascript，所以我希望有一个基于 C# 或 CSS 的解决方案。

*注意：并不是我不愿意分享我尝试过的代码，在看到它们根本不起作用后我真的删除了它们，并且在求助于 StackOverflow 之前我已经花了几天时间研究这个，知道它有严格的提问规则。如果我知道该怎么做，我就不会在这里问了，非常感谢。

如果我没记错的话，我想我使用了以下代码：

select option: hover{
color: pink
}

或者我试过了

select option: ListBox1 : hover {

在我的 CSS 中，我真的不记得了。无论如何，为了简单起见，我尝试过的代码都不起作用。

【问题讨论】：

如果您发布实际代码向我们展示您所尝试的内容，您所说的内容对您不起作用，这将真正有助于您的事业。另外我认为你应该尝试学习 JavaScript，因为它可以在处理 asp.net 网页时为你省去很多麻烦..
你知道如何分配mouseover 让两个列表框都指向同一个事件处理程序吗？我将发布一个示例，说明您可以调整代码以适应您的情况
Links can be found here please check this
请发布您的代码，以便我们查看。如果您有问题，我们可以帮助您更正您的代码。。我发布的答案您可以将两个 ListBox 分配给同一个事件跨度>
我在看到代码不起作用后立即删除了它们。我主要使用 css。

标签： c# css asp.net

【解决方案1】：

foreach (ListItem li in ListBox1.Items)
{
    li.Attributes.Add("onmouseover", "this.style.backgroundColor='blue';");
    li.Attributes.Add("onmouseout" , "this.style.backgroundColor='white';");
}

foreach (ListItem li in ListBox2.Items)
{
    li.Attributes.Add("onmouseover", "this.style.backgroundColor='blue';");
    li.Attributes.Add("onmouseout" , "this.style.backgroundColor='white';");
}

【讨论】：

这是一个单独的方法还是我创建一个新方法并将其放入？
我在属性中找不到任何鼠标悬停事件

【解决方案2】：

您可以使用 C# 设置任何列表框的选定项目，因为通过在 ListBox 标记中设置 AutoPostback ="true" 可以使 asp.net ListBox 在选择项目时回发。请注意，将鼠标悬停在 Listbox 中的某个项目上不会导致回发，因此您不能使用 C# 来满足悬停要求。

因此，您的情况需要 C# 以及 jQuery/JavaScript。

使用 jQuery 捕获选项元素悬停事件，而使用 C# 在服务器端捕获更改的选定索引。下面给出了您可以在终端上运行的示例 aspx 页面。在悬停事件中，我使用页面中定义的名为hoverClass 的类来控制悬停外观。

注意：无法通过 CSS 自定义所选项目的外观，因为所有浏览器都将自己的背景颜色 CSS 应用于所选选项。

假设

我假设当您在任何一个列表框中悬停/选择一个项目时，其他列表框中具有相同索引的项目将被选中/悬停。这适用于 Chrome、Opera FireFox 和 Edge 浏览器。

您可以在以下网址观看此示例页面行为的视频：Video of how page behaves

带有 jQuery 和 C# 代码的示例 aspx 页面

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<script runat="server">

    protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //select the same index in other ListBox
        ListBox2.SelectedIndex = ListBox1.SelectedIndex;
    }

    protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //select the same index in other ListBox
        ListBox1.SelectedIndex = ListBox2.SelectedIndex;
    }
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Wrtap text in ListBox</title>
    <style>
        select[id*='ListBox1'] option {
            white-space: normal;
            /*min-height:40px;*/
        }

        .hoverClass {
            background-color: pink !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1"
                Rows="6"
                Width="150px" AutoPostBack="true"
                SelectionMode="Single" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"
                runat="server">
                <asp:ListItem>Item 1 dsdds  sdsdsdsd sdsd sdsd sds xyz</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3 gfgf kgkgkg kgkkg abc</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
                <asp:ListItem>Item 5</asp:ListItem>
                <asp:ListItem>Item 6</asp:ListItem>
            </asp:ListBox>
        </div>
        <div>
            <asp:ListBox ID="ListBox2"
                Rows="6"
                Width="150px" AutoPostBack="true"
                SelectionMode="Single" OnSelectedIndexChanged="ListBox2_SelectedIndexChanged"
                runat="server">
                <asp:ListItem>Value 1</asp:ListItem>
                <asp:ListItem>Value 2</asp:ListItem>
                <asp:ListItem>Value 3 gfgf kgkgkg kgkkg abc</asp:ListItem>
                <asp:ListItem>Value 4</asp:ListItem>
                <asp:ListItem>Value 5</asp:ListItem>
                <asp:ListItem>Value 6</asp:ListItem>
            </asp:ListBox>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                //set size option for each select element since its needed for hover to fire
                $("select").each(function () {
                    this.setAttribute("size", this.options.length);
                });

                //select option hover event
                $("select option").hover(function (e) {
                    //remove  special hover classes from option elements
                    $("select option").each(function () {
                        $(this).removeClass("hoverClass");
                    });

                    //get option being hovered
                    var hoveredOption = $(e.target);

                    //style hovered option
                    if (hoveredOption.is('option')) {
                        hoveredOption.addClass("hoverClass");
                    }

                    //get the other listbox 
                    var otherListBox = null;
                    if (hoveredOption.parent().prop("id").indexOf("ListBox1") >= 0) {//you hovered over first list box
                        otherListBox = $("#<%=ListBox2.ClientID%>");
                } else if (hoveredOption.parent().prop("id").indexOf("ListBox2") >= 0) {//you hovered over second list box
                    otherListBox = $("#<%=ListBox1.ClientID%>");
                }

                //style the same index option in other ListBox with hover style 
                if (otherListBox && hoveredOption[0].index < otherListBox[0].options.length) {
                    $(otherListBox[0].options[hoveredOption[0].index]).addClass("hoverClass");
                }
                });
            });


        </script>
    </form>
</body>
</html>

【讨论】：

嘿，非常感谢！非常感谢您为我提供的帮助。
由于我的列表框面临进一步的复杂性，我将改用 gridview，您提供的解决方案能否在 gridview 中工作？
不，gridview 需要不同的解决方案。