locked
Hovering over an image in a listview causes all items in the list to be selected

    Question

  • I have created an item template for my listview that has custom buttons in it. The format is as follows:

     <div class="class1">
                            <div class="delBtn" data-win-res="{title: 'cmdDeleteTooltip'}">
                                <input type="button" id="deleteButton" class="win-interactive" tabindex="-1" />
                                <label for="deleteButton"></label>
                            </div>
                            <div class="editBtn" data-win-res="{title: 'cmdEditTooltip'}">
                                <input type="button" id="editButton" class="win-interactive" tabindex="-1" />
                                <label for="editButton"></label>
                            </div>
                        </div>

    The image is attached to the label for these items through CSS, as follows:

    /* Styles for the 'edit' button */
    .editBtn > input[type=button] {
        width: 24px;
        height: 24px;
        ;
        display: block;
        border: none;
        box-sizing: border-box;
        opacity: 0;
    }
    .editBtn > input[type=button] + label {
        width: 24px;
        height: 24px;
        display: inline-block;
        background-image: url("/images/edit.png");
        background-repeat: no-repeat;
        background- 0;
    }
    .editBtn > input[type=button]:hover + label {
        background-image: url("/images/edit.png");
        background-repeat: no-repeat;
        background-position: -31px 0;
        width: 24px;
        height: 24px;
    }

    The images render properly in the listview; however, when I hover over the very first item in the list (hovering over one of the images), all of the items in the listview ended up being highlighted/outlined as selected. This does not occur if I hover over one of the images in any of the other rows of the listview. This occurs in both the Group and List styled listviews. Is there a simple workaround for this issue?

    Thanks!

    Wednesday, November 28, 2012 3:29 AM

All replies

  • Note that the empty line in the CSS above (with just the semicolon in it) should read that it has absolute positioning. The forums are eating that text for some reason.


    • Edited by jennallen Wednesday, November 28, 2012 3:37 AM
    Wednesday, November 28, 2012 3:30 AM