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

Question

I have 2 listboxes, currently I can mouseover the listbox and highlight an item on mouseover. But I want it such that when I mouseover to either listbox1 or listbox2, the items in both listboxes would be highlighted when I mouseover.

This is what I get now:

I want the first item of both listbox1 and listbox2 to be highlighted when I mouseover.

I have researched for a couple of hours on how to do this but none of them seemed to work for me.

Similarly, if I click on either listbox1 or listbox2, I would be able to select a row too.

I am not familiar with jQuery or Javascript, so I would prefer to have a solution that is either C# or CSS based.

*Note: It is not that I am not willing to share the codes I have tried with, I really deleted them after seeing that they did not work AT ALL and I have already spent days researching on this before resorting to StackOverflow, knowing that it has strict rules for asking questions. If I had known how to do I would not have asked here, thanks so much.

If I remember correctly I think I used the following code:

select option: hover{
color: pink
}

Or maybe I tried with

select option: ListBox1 : hover {

In my CSS, I really cannot remember anymore. Anyway to keep it simple none of the codes I tried worked.

it would truly help your cause if you post actual code show us what you have tried in regards to what you are stating doesn't work for you. also I think that you should try to learn JavaScript as well it can save you a lot of headache when working with asp.net web pages.. — MethodMan, Dec 03 '17 at 06:32
do you know how to assign `mouseover` to have both Listboxes point to the same event handler..? I will post an example of what you can do you can tweak the code to fit your situation — MethodMan, Dec 03 '17 at 06:41
[Links can be found here please check this](https://stackoverflow.com/questions/192584/how-can-i-set-different-tooltip-text-for-each-item-in-a-listbox) — charithsuminda, Dec 03 '17 at 06:54
please post you code so that we can see.. and if you have issues we can help you correct your code.. what I posted as an answer you can assign both ListBoxes to the same event — MethodMan, Dec 03 '17 at 07:30
I deleted my codes immediately after seeing that they didnt work.. i mainly used css for this. — blackJack, Dec 03 '17 at 08:05
you need to post the code you are trying and you need to take the time to read and understand documentation - [MSDN How to set attributes](https://msdn.microsoft.com/en-us/library/7a9d6h4f.aspx) — MethodMan, Dec 03 '17 at 14:41

score 0 · Answer 1 · answered Dec 03 '17 at 06:55

0

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';");
}

answered Dec 03 '17 at 06:55

MethodMan

18,625
6
34
52

is this a method on its own or do i create a new method and put this in? – blackJack Dec 03 '17 at 07:27
i cant find any mouseover event in the properties – blackJack Dec 03 '17 at 08:04

Sunil · Accepted Answer · 2017-12-03T15:19:28.260

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>

Hey there THANK YOU SO MUCH IT WORKED! I am really grateful for the help that you have provided me. — blackJack, Dec 06 '17 at 04:53
As I am facing further complications with my listbox I will be switching over to gridview instead, will the solutions you provided be able to work in gridview? — blackJack, Dec 06 '17 at 08:19

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

2 Answers2

Linked