[Solved] How to highlight a row of multiple list boxes on hover in asp.net?

Question

You can set selected item of any listbox using C# since asp.net ListBox can be made to post back when an item is selected by setting AutoPostback =”true” in ListBox markup. Note that hovering over an item in Listbox will not cause a postback, so you cannot use C# for your hover requirement.

So, your situation would need C# as well as jQuery/JavaScript.

The option element hover event is captured using jQuery, while selected index changed is captured on server-side using C#. Sample aspx page that you can run on your end is given below. In hover event, I am using a class called hoverClass defined in the page to control hover appearance.

NOTE: The selected item appearance is not possible to customize through CSS since all browsers apply their own CSS of background color to selected option.

Assumption

I have assumed that when you hover/select an item in any one of the listboxes then an item with same index in other list box gets selected/hovered. This works in Chrome, Opera FireFox and Edge browsers.

You can see a video of how this sample page behaves at this url: Video of how page behaves

Sample aspx page with jQuery and C# code

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

Accepted Answer